/* ATLAS WORLDS — MOTION */
/* ============================================================
   MOTION & ANIMATIONS (appended)
   ============================================================ */

/* Reveal — base */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Hero title — letter-by-letter */
.hero-title { visibility: hidden; }
.hero-title.ready { visibility: visible; }
.hero-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(-45deg);
  transform-origin: 50% 100%;
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
  transition-delay: var(--d, 0ms);
}
.hero-title.ready .ch { opacity: 1; transform: none; }

.hero-title .worlds .ch {
  color: var(--brass);
}

/* Hero mark (kicker) — slow fade + slide in */
.hero-mark {
  opacity: 0;
  transform: translateX(-18px);
  animation: kicker-in 1.1s 0.25s cubic-bezier(.19,1,.22,1) forwards;
}
@keyframes kicker-in { to { opacity: 1; transform: none; } }

/* Hero lead — staged fade */
.fx-lead { opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s ease; }
.fx-lead.in { opacity: 1; transform: none; }

/* Hero meta items — staggered rise */
.hero-meta .m-item {
  opacity: 0;
  transform: translateY(12px);
  animation: meta-rise .9s cubic-bezier(.19,1,.22,1) forwards;
}
.hero-meta .m-item:nth-child(1) { animation-delay: 1.4s; }
.hero-meta .m-item:nth-child(2) { animation-delay: 1.55s; }
.hero-meta .m-item:nth-child(3) { animation-delay: 1.70s; }
@keyframes meta-rise { to { opacity: 1; transform: none; } }

/* Hero CTAs — staggered */
.hero-ctas .btn {
  opacity: 0;
  transform: translateY(10px);
  animation: meta-rise .9s cubic-bezier(.19,1,.22,1) forwards;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-ctas .btn:nth-child(1) { animation-delay: 1.9s; }
.hero-ctas .btn:nth-child(2) { animation-delay: 2.0s; }
.hero-ctas .btn:nth-child(3) { animation-delay: 2.1s; }

/* Hero seal — rings rotate, ornamental */
.hero-seal .ring.r1 { animation: ring-spin-slow 180s linear infinite; }
.hero-seal .ring.r2 { animation: ring-spin-rev 120s linear infinite; }
.hero-seal .ring.r3 { animation: ring-breathe 8s ease-in-out infinite; }
@keyframes ring-spin-slow { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ring-spin-rev  { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes ring-breathe { 0%,100% { opacity: 0.15; } 50% { opacity: 0.35; } }

.hero-seal img {
  transition: transform .6s cubic-bezier(.19,1,.22,1);
  animation: seal-float 7s ease-in-out infinite;
}
@keyframes seal-float { 0%,100% { filter: drop-shadow(0 10px 30px rgba(201,161,74,0.15)); } 50% { filter: drop-shadow(0 20px 50px rgba(201,161,74,0.3)); } }

.hero-seal .numeral {
  animation: numeral-pulse 4s ease-in-out infinite;
}
.hero-seal .numeral.n { animation-delay: 0s; }
.hero-seal .numeral.e { animation-delay: 1s; }
.hero-seal .numeral.s { animation-delay: 2s; }
.hero-seal .numeral.w { animation-delay: 3s; }
@keyframes numeral-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.9; } }

.hero-seal .meta-stamp {
  animation: stamp-fade 1s 2.2s backwards cubic-bezier(.19,1,.22,1);
}
@keyframes stamp-fade { from { opacity: 0; transform: translate(-50%, 8px); } }

/* Section head — numeral roll-in */
.sec-head .num {
  transition: color .6s ease, transform .8s cubic-bezier(.19,1,.22,1);
}
.sec-head .num.roll-in {
  animation: num-roll 1.1s cubic-bezier(.19,1,.22,1);
}
@keyframes num-roll {
  0%   { opacity: 0; transform: translateY(-30px) rotateX(90deg); }
  60%  { opacity: 1; transform: translateY(0) rotateX(-10deg); }
  100% { transform: none; }
}

/* Section head — title underline draws in */
.sec-head { position: relative; }
.sec-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--brass), transparent);
  transition: width 1.4s cubic-bezier(.19,1,.22,1);
}
.sec-head.reveal.in::after { width: 100%; }

/* Section head — italic emphasis subtle shimmer on reveal */
.sec-head .title em {
  background: linear-gradient(90deg, var(--brass-hi) 0%, var(--brass) 40%, var(--brass-hi) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brass-shimmer 6s linear infinite;
}
@keyframes brass-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* About — filigree parallax */
#about::after {
  transform: translateY(var(--fil-y, 0px));
  transition: transform .2s linear;
}

/* Drop cap — scribble in */
#about .manifesto p.first::first-letter {
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.19,1,.22,1);
}
#about .manifesto p.first.drop-in::first-letter {
  animation: dropcap-in 1.4s cubic-bezier(.19,1,.22,1) backwards;
}
@keyframes dropcap-in {
  0%   { opacity: 0; transform: translateY(-12px) rotate(-6deg) scale(0.7); }
  60%  { opacity: 1; }
  100% { transform: none; }
}

/* Sidebar dd — hover shimmer */
#about .sidebar dd {
  position: relative;
  overflow: hidden;
  transition: color .4s ease;
}
#about .sidebar dd::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,161,74,0.14), transparent);
  transition: left .8s ease;
  pointer-events: none;
}
#about .sidebar:hover dd::after { left: 100%; }
#about .sidebar dl:hover dt { color: var(--brass); }

/* Values — staggered reveal + hover lift */
.values .val {
  transition: background .5s ease, transform .5s ease;
  position: relative;
  overflow: hidden;
}
.values .val:hover { background: rgba(201,161,74,0.04); }
.values .val::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.values .val:hover::before { transform: scaleX(1); }
.values .val .numeral {
  transition: color .4s ease, transform .4s ease;
}
.values .val:hover .numeral { color: var(--brass); transform: translateY(-3px); }

/* Buttons — magnetic base + gold halo */
.btn {
  transition: transform .35s cubic-bezier(.19,1,.22,1), background .3s ease, color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(201,161,74,0.25), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:hover { box-shadow: 0 8px 30px -8px rgba(201,161,74,0.35); }
.btn .chev { transition: transform .3s cubic-bezier(.19,1,.22,1); display: inline-block; }
.btn:hover .chev { transform: translateX(4px); }

/* Team member — portrait wrapper preserves 3d */
#team .member { transition: transform .5s ease; }
#team .member .portrait {
  transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease;
  transform-style: preserve-3d;
}
#team .member:hover .portrait {
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.6), 0 0 0 1px var(--rule-s);
}
#team .member .portrait img {
  transition: transform .6s cubic-bezier(.19,1,.22,1), filter .5s ease;
}
#team .member:hover .portrait img { transform: scale(1.04); filter: contrast(1.08) saturate(1.1); }

#team .member h4 { transition: letter-spacing .4s ease; }
#team .member:hover h4 { letter-spacing: 0.02em; }

#team .member .numeral {
  transition: opacity .4s ease, transform .4s ease;
}
#team .member:hover .numeral { opacity: 1; transform: scale(1.1) rotate(-5deg); }

#team .member .fleur {
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}
#team .member:hover .fleur { transform: rotate(15deg) scale(1.15); }

/* Devlog — entry hover line draw */
#devlog .entry {
  position: relative;
  transition: background .4s ease;
}
#devlog .entry::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width .6s cubic-bezier(.19,1,.22,1);
}
#devlog .entry:hover::after { width: 100%; }
#devlog .entry:hover { background: rgba(201,161,74,0.03); }
#devlog .entry .arrow {
  transition: transform .4s cubic-bezier(.19,1,.22,1), color .3s ease;
}
#devlog .entry:hover .arrow { transform: translateX(8px); color: var(--brass); }

/* Projects — feature card subtle tilt */
#projects .feature {
  transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease;
}
#projects .feature:hover {
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}

/* Approach — principles stagger */
#approach .ap, #approach .principle {
  transition: border-color .4s ease, transform .4s ease;
}
#approach .ap:hover, #approach .principle:hover {
  border-color: var(--rule-s);
  transform: translateY(-3px);
}

/* Nav — brand glow on hover */
.top .brand img {
  transition: transform .5s cubic-bezier(.19,1,.22,1), filter .5s ease;
}
.top .brand:hover img {
  transform: rotate(-5deg) scale(1.05);
  filter: drop-shadow(0 0 12px rgba(201,161,74,0.4));
}
.top .brand .name { transition: color .3s ease; }

/* Nav links — underline sweep */
.top nav a {
  position: relative;
  transition: color .3s ease;
}
.top nav a::before {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width .4s cubic-bezier(.19,1,.22,1);
}
.top nav a:hover::before { width: 100%; }
.top nav a:hover { color: var(--brass); }

/* Lang toggle */
.top .lang { transition: color .3s ease, border-color .3s ease; }
.top .lang:hover { color: var(--brass); }

/* Footer — brand float */
footer .ft-brand img {
  animation: foot-float 9s ease-in-out infinite;
  transition: filter .5s ease;
}
@keyframes foot-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
footer .ft-brand:hover img { filter: drop-shadow(0 4px 20px rgba(201,161,74,0.4)) brightness(1.1); }