/* Page-load choreography for the landing: the header drops in, the model rises, the copy and the
   look card follow one after another, items "get put on" one by one. Blocks below the fold rise
   as they scroll into view (landing.js adds .rv / .in). The entry animations run only under html.intro, which an inline script sets when the page is
   actually visible: a background tab or a paused renderer shows everything at once instead of blank. */

@keyframes in-down { from { opacity: 0; translate: 0 -18px; } }
@keyframes in-up { from { opacity: 0; translate: 0 26px; } }
@keyframes in-left { from { opacity: 0; translate: 40px 0; scale: .97; } }
@keyframes model-rise { from { opacity: 0; translate: 0 60px; scale: .94; } }
@keyframes chip-pop { from { opacity: 0; scale: .3; } 70% { opacity: 1; scale: 1.08; } }
@keyframes worn { from { opacity: 0; scale: .6; } 60% { scale: 1.12; } }
@keyframes orbit-draw { from { opacity: 0; scale: .7 .4; } }
@keyframes shine { from { background-position: -160% 0; } to { background-position: 260% 0; } }

html.intro .hero .model { animation: model-rise 1.1s cubic-bezier(.2,.8,.2,1) .15s both; }
html.intro .hero .orbit { animation: orbit-draw .9s cubic-bezier(.2,.8,.2,1) .55s both; }
html.intro .hero .gem { animation: in-down .7s cubic-bezier(.2,1.4,.4,1) .9s both, gem-bob 3s ease-in-out 1.6s infinite; }
html.intro .hero .chip { animation: chip-pop .6s cubic-bezier(.2,1.2,.4,1) both, float 4s ease-in-out infinite;
  animation-delay: calc(.7s + var(--z) * .14s), calc(var(--z) * -.7s); }
html.intro .hero .tryline { animation: in-up .6s ease-out 1.3s both; }

html.intro .h-copy > * { animation: in-up .7s cubic-bezier(.2,.8,.2,1) both; }
html.intro .h-copy > :nth-child(1) { animation-delay: .25s; }
html.intro .h-copy > :nth-child(2) { animation-delay: .4s; }
html.intro .h-copy > :nth-child(3) { animation-delay: .65s; }
html.intro .h-copy > :nth-child(4) { animation-delay: .75s; }
html.intro .h-copy > :nth-child(5) { animation-delay: .85s; }
html.intro .h-copy > :nth-child(6) { animation-delay: .95s; }
html.intro .h-copy > :nth-child(7) { animation-delay: 1.05s; }
/* the primary button gets one sweep of light once everything has landed */
html.intro .hero .cta .btn.primary { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%), linear-gradient(180deg, #3fb0f5, var(--blue));
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: shine 1.2s ease-in-out 1.6s both; }

html.intro .h-card { animation: in-left .8s cubic-bezier(.2,.8,.2,1) .45s both; }
html.intro .h-card .look-list li { animation: in-up .5s ease-out both; }
html.intro .h-card .look-list li em { animation: worn .45s cubic-bezier(.2,1.2,.4,1) both; }
html.intro .h-card .look-list li:nth-child(1) { animation-delay: .8s; }
html.intro .h-card .look-list li:nth-child(1) em { animation-delay: 1.1s; }
html.intro .h-card .look-list li:nth-child(2) { animation-delay: .92s; } html.intro .h-card .look-list li:nth-child(2) em { animation-delay: 1.25s; }
html.intro .h-card .look-list li:nth-child(3) { animation-delay: 1.04s; } html.intro .h-card .look-list li:nth-child(3) em { animation-delay: 1.4s; }
html.intro .h-card .look-list li:nth-child(4) { animation-delay: 1.16s; } html.intro .h-card .look-list li:nth-child(4) em { animation-delay: 1.55s; }
html.intro .h-card .look-list li:nth-child(5) { animation-delay: 1.28s; } html.intro .h-card .look-list li:nth-child(5) em { animation-delay: 1.7s; }
.h-card .look-list li em { display: inline-block; }
html.intro .h-card .h-buy { animation: in-up .6s ease-out 1.5s both; }

/* scroll reveal: set by landing.js only on blocks that start below the fold */
.rv { opacity: 0; translate: 0 34px; transition: opacity .8s cubic-bezier(.2,.8,.2,1), translate .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--rv, 0) * 90ms); }
.rv.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .hero .model, .hero .orbit, .hero .chip, .hero .tryline, .h-copy > *, .hero .cta .btn.primary,
  .h-card, .h-card .look-list li, .h-card .look-list li em, .h-card .h-buy { animation: none !important; }
  .hero .gem { animation: none; }
  .rv { opacity: 1; translate: none; transition: none; }
}