/* ==========================================================================
   CRIMSON LUIS — Atelier landing page
   Palette : ink / oxblood / crimson / lacquer / bone / gilt
   Display : Bodoni Moda   Body & utility : Jost
   ========================================================================== */

:root{
  --ink:      #0A0708;
  --ink-2:    #120C0E;
  --oxblood:  #2E0912;
  --crimson:  #A81B33;
  --lacquer:  #D22B45;
  --bone:     #EFE7DD;
  --bone-dim: #9C918A;
  --gilt:     #C2A05F;

  --shell: min(1240px, 90vw);
  --gut: clamp(1.25rem, 5vw, 3.5rem);

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.65;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* subtle woven grain over the whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9;
  pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

::selection{ background:var(--crimson); color:var(--bone); }

:focus-visible{
  outline:1px solid var(--gilt);
  outline-offset:4px;
}

/* --------------------------------------------------------------------------
   TYPE PRIMITIVES
   -------------------------------------------------------------------------- */

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}

.eyebrow,
.section-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.42em;
  color:var(--bone-dim);
  font-weight:400;
  margin:0;
}

.section-label{
  display:flex; align-items:center; gap:1rem;
  color:var(--crimson);
}
.section-label::after{
  content:""; flex:0 0 3.5rem; height:1px;
  background:linear-gradient(90deg,var(--crimson),transparent);
}

.link-underline{
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim);
  padding-bottom:3px;
  background-image:linear-gradient(var(--gilt),var(--gilt));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease-soft), color .4s ease;
}
.link-underline:hover{ background-size:100% 1px; color:var(--bone); }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn{
  --btn-fg:var(--bone);
  position:relative; display:inline-block; overflow:hidden;
  padding:1rem 2.4rem;
  border:1px solid rgba(239,231,221,.28);
  border-radius:2px;
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--btn-fg);
  background:transparent;
  cursor:pointer;
  transition:border-color .5s var(--ease), color .45s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--crimson);
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform .55s var(--ease-soft);
}
.btn:hover{ border-color:var(--crimson); color:var(--bone); }
.btn:hover::before{ transform:scaleY(1); transform-origin:top center; }

.btn--solid{
  border-color:var(--crimson);
  background:var(--crimson);
  font-family:var(--body);
}
.btn--solid::before{ background:var(--lacquer); }

/* --------------------------------------------------------------------------
   CURTAIN / PRELOADER
   -------------------------------------------------------------------------- */

.curtain{ position:fixed; inset:0; z-index:200; pointer-events:none; }

.curtain__panel{
  position:absolute; top:0; height:100%; width:50.5%;
  background:var(--ink);
  transition:transform 1.15s var(--ease-soft) .55s;
}
.curtain__panel--l{ left:0; }
.curtain__panel--r{ right:0; }
.curtain__panel--l::after,
.curtain__panel--r::after{
  content:""; position:absolute; top:0; height:100%; width:1px;
  background:linear-gradient(180deg,transparent,var(--crimson),transparent);
  opacity:.6;
}
.curtain__panel--l::after{ right:0; }
.curtain__panel--r::after{ left:0; }

.curtain__mark{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.85rem;
  transition:opacity .5s ease;
}
.curtain__initials{
  font-family:var(--display);
  font-size:clamp(2.6rem,7vw,4.6rem);
  letter-spacing:.14em; text-indent:.14em;
  color:var(--bone);
  opacity:0; transform:translateY(14px);
  animation:markIn .9s var(--ease-soft) .1s forwards;
}
.curtain__rule{ display:block; width:120px; height:1px; background:rgba(239,231,221,.18); overflow:hidden; }
.curtain__rule i{
  display:block; height:100%; width:100%;
  background:var(--crimson);
  transform:scaleX(0); transform-origin:left;
  animation:ruleIn 1.05s var(--ease) .35s forwards;
}
.curtain__word{
  font-size:.66rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--bone-dim); text-indent:.5em;
  opacity:0; animation:markIn .8s ease .55s forwards;
}

@keyframes markIn{ to{ opacity:1; transform:none; } }
@keyframes ruleIn{ to{ transform:scaleX(1); } }

.curtain.is-open .curtain__mark{ opacity:0; }
.curtain.is-open .curtain__panel--l{ transform:translateX(-101%); }
.curtain.is-open .curtain__panel--r{ transform:translateX(101%); }

/* --------------------------------------------------------------------------
   THE SEAM — signature stitched spine, drawn by scroll
   -------------------------------------------------------------------------- */

.seam{
  position:fixed; top:0; left:calc((100vw - var(--shell)) / 4);
  width:2px; height:100vh; z-index:6; pointer-events:none;
}
.seam__guide,
.seam__thread{
  position:absolute; top:0; left:0; width:100%; height:100%;
}
.seam__guide{
  background-image:linear-gradient(180deg,rgba(239,231,221,.16) 55%,transparent 0);
  background-size:2px 14px;
}
.seam__thread{
  background-image:linear-gradient(180deg,var(--crimson) 55%,transparent 0);
  background-size:2px 14px;
  transform:scaleY(0); transform-origin:top;
  box-shadow:0 0 12px rgba(168,27,51,.55);
}
@media (max-width:900px){ .seam{ display:none; } }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.6rem var(--gut);
  transition:background .6s var(--ease), padding .6s var(--ease), border-color .6s ease;
  border-bottom:1px solid transparent;
  opacity:0; transform:translateY(-14px);
  animation:navIn .9s var(--ease-soft) 1.5s forwards;
}
@keyframes navIn{ to{ opacity:1; transform:none; } }

.nav.is-stuck{
  background:rgba(10,7,8,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(239,231,221,.09);
  padding-top:1rem; padding-bottom:1rem;
}

.nav__brand{
  font-family:var(--display);
  font-size:1.12rem; letter-spacing:.2em; text-transform:uppercase;
}
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim);
  position:relative;
  transition:color .4s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--crimson);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-soft);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  padding:.62rem 1.4rem;
  border:1px solid rgba(239,231,221,.24);
  border-radius:2px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  will-change:transform;
}
.nav__cta:hover{ background:var(--crimson); border-color:var(--crimson); }

@media (max-width:820px){
  .nav__links{ display:none; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem var(--gut) 3rem;
  overflow:hidden;
}

/* ambient silk — slow drifting oxblood light */
.hero__silk{
  position:absolute; inset:-25%;
  background:
    radial-gradient(45% 55% at 22% 30%, rgba(168,27,51,.30), transparent 62%),
    radial-gradient(40% 50% at 76% 62%, rgba(46,9,18,.85), transparent 66%),
    radial-gradient(60% 60% at 55% 90%, rgba(194,160,95,.07), transparent 70%);
  filter:blur(28px);
  animation:silk 24s ease-in-out infinite alternate;
}
@keyframes silk{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(3%,-2%,0) scale(1.07); }
  100% { transform:translate3d(-3%,2%,0) scale(1.03); }
}

.hero__inner{
  position:relative; z-index:2;
  width:var(--shell); margin:0 auto;
}

.hero__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.4rem,13.5vw,11.5rem);
  line-height:.86;
  letter-spacing:-.03em;
  margin:1.6rem 0 2rem;
}
.hero__title .line{ display:block; white-space:nowrap; }
.hero__title .line--em{
  font-style:italic;
  color:var(--crimson);
  padding-left:.14em;
}

/* each letter is injected by JS and lifts in sequence */
.hero__title .ltr{
  display:inline-block;
  transform:translateY(115%) rotate(4deg);
  opacity:0;
  animation:letterIn 1.05s var(--ease-soft) forwards;
}
@keyframes letterIn{ to{ transform:none; opacity:1; } }

.hero__lede{
  max-width:44ch;
  color:var(--bone-dim);
  font-size:clamp(1rem,1.25vw,1.16rem);
  margin:0 0 2.6rem;
}

.hero__actions{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }

.hero__foot{
  position:relative; z-index:2;
  width:var(--shell); margin:4.5rem auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.hero__meta{
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--bone-dim);
}
.scroll-cue{
  display:block; width:1px; height:64px;
  background:rgba(239,231,221,.16);
  overflow:hidden;
}
.scroll-cue i{
  display:block; width:100%; height:34%;
  background:var(--crimson);
  animation:cue 2.3s var(--ease) infinite;
}
@keyframes cue{
  0%   { transform:translateY(-110%); }
  55%  { transform:translateY(200%); }
  100% { transform:translateY(200%); }
}

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */

.marquee{
  border-top:1px solid rgba(239,231,221,.10);
  border-bottom:1px solid rgba(239,231,221,.10);
  padding:1.15rem 0;
  overflow:hidden;
  background:var(--ink-2);
}
.marquee__track{
  display:flex; align-items:center; gap:2.4rem;
  width:max-content;
  animation:slide 42s linear infinite;
}
.marquee__track span{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.4vw,1.9rem);
  font-style:italic;
  color:var(--bone-dim);
  white-space:nowrap;
}
.marquee__track b{ color:var(--crimson); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------------
   MANIFESTO
   -------------------------------------------------------------------------- */

.manifesto{
  width:var(--shell); margin:0 auto;
  padding:clamp(6rem,13vw,11rem) 0;
}
.manifesto__statement{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.75rem,4.4vw,3.5rem);
  line-height:1.22;
  letter-spacing:-.01em;
  margin:2.2rem 0 0;
  max-width:20ch;
}
.manifesto__statement .split{
  display:block; overflow:hidden;
}
.manifesto__statement .split > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  transition:transform 1s var(--ease-soft);
}
.manifesto__statement.is-in .split > i{ transform:none; }
.manifesto__statement .split:nth-child(2) > i{ transition-delay:.12s; }
.manifesto__statement .split:nth-child(3) > i{ transition-delay:.24s; color:var(--crimson); font-style:italic; }

.manifesto__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(3.5rem,7vw,6rem);
  padding-top:2.6rem;
  border-top:1px solid rgba(239,231,221,.10);
}
.stat em{
  display:block;
  font-family:var(--display); font-style:normal;
  font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1;
  color:var(--gilt);
}
.stat span{
  display:block; margin-top:.7rem;
  font-size:.82rem; color:var(--bone-dim);
  max-width:22ch;
}
@media (max-width:720px){
  .manifesto__grid{ grid-template-columns:1fr; gap:2.2rem; }
}

/* --------------------------------------------------------------------------
   COLLECTION
   -------------------------------------------------------------------------- */

.collection{
  width:var(--shell); margin:0 auto;
  padding:clamp(4rem,8vw,7rem) 0 clamp(6rem,12vw,10rem);
}
.collection__head{ max-width:52ch; }
.collection__head .display{ margin:1.6rem 0 1rem; }
.collection__note{ color:var(--bone-dim); margin:0; }

.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(3rem,6vw,5rem);
}

.card__frame{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid rgba(239,231,221,.09);
  border-radius:2px;
  background:var(--ink-2);
}
.card__img{
  position:absolute; inset:-12% 0;
  background-image:var(--img);
  background-size:cover; background-position:center;
  transition:transform 1.3s var(--ease-soft), filter 1.1s var(--ease);
  filter:saturate(.85);
  will-change:transform;
}
/* Placeholder cloth — replace --img on each frame with your own photograph */
.card__frame--a{ --img:
  radial-gradient(70% 55% at 32% 24%, rgba(168,27,51,.62), transparent 62%),
  linear-gradient(150deg,#3A0C16,#150A0D 68%); }
.card__frame--b{ --img:
  radial-gradient(65% 60% at 70% 30%, rgba(194,160,95,.20), transparent 60%),
  linear-gradient(200deg,#231A18,#0F0B0C 70%); }
.card__frame--c{ --img:
  radial-gradient(75% 50% at 45% 70%, rgba(210,43,69,.34), transparent 65%),
  linear-gradient(120deg,#2A1116,#120C0E 66%); }

.card__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,7,8,.78));
  opacity:.85;
  transition:opacity .8s var(--ease);
}
.card:hover .card__img{ transform:scale(1.06); filter:saturate(1.05); }
.card:hover .card__frame::after{ opacity:.5; }

.card__tag{
  position:absolute; z-index:3; left:1.1rem; bottom:1.1rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone);
  padding:.42rem .8rem;
  border:1px solid rgba(239,231,221,.28);
  border-radius:2px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.card__body{ padding:1.5rem .2rem 0; }
.card__body h3{
  font-family:var(--display); font-weight:400;
  font-size:1.5rem; line-height:1.15; margin:0 0 .6rem;
}
.card__body p{
  margin:0 0 1rem; color:var(--bone-dim); font-size:.92rem;
}
.card__price{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt);
}

@media (max-width:880px){ .cards{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   CRAFT
   -------------------------------------------------------------------------- */

.craft{
  position:relative;
  background:linear-gradient(180deg,var(--ink),#160A0E 45%,var(--ink));
  border-top:1px solid rgba(239,231,221,.08);
  border-bottom:1px solid rgba(239,231,221,.08);
  padding:clamp(6rem,12vw,10rem) var(--gut);
}
.craft__intro{ width:var(--shell); margin:0 auto; max-width:44ch; }
.craft__intro .display{ margin-top:1.5rem; }

.steps{
  list-style:none; margin:clamp(3rem,7vw,5.5rem) auto 0; padding:0;
  width:var(--shell);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3.5rem);
}
.step{
  padding-top:2rem;
  border-top:1px solid rgba(239,231,221,.14);
  position:relative;
}
.step::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:var(--crimson);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-soft) .15s;
}
.step.is-in::before{ transform:scaleX(1); }
.step__no{
  display:block;
  font-family:var(--display); font-size:.9rem; letter-spacing:.3em;
  color:var(--crimson); margin-bottom:1.4rem;
}
.step h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.1rem); margin:0 0 .8rem;
}
.step p{ margin:0; color:var(--bone-dim); font-size:.94rem; }

@media (max-width:880px){ .steps{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   EDITORIAL
   -------------------------------------------------------------------------- */

.editorial{
  width:var(--shell); margin:0 auto;
  padding:clamp(6rem,12vw,10rem) 0;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.editorial__plate{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid rgba(239,231,221,.09);
  border-radius:2px;
}
.editorial__img{
  position:absolute; inset:-14% 0;
  /* Replace with your own campaign image: background-image:url('../assets/campaign.jpg'); */
  background-image:
    radial-gradient(60% 50% at 60% 22%, rgba(168,27,51,.55), transparent 62%),
    radial-gradient(55% 45% at 25% 78%, rgba(194,160,95,.14), transparent 64%),
    linear-gradient(160deg,#26090F,#0C0809 72%);
  background-size:cover; background-position:center;
  will-change:transform;
}
.editorial__quote{ margin:0; }
.editorial__quote p{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.5rem);
  line-height:1.28; margin:0 0 1.6rem;
  text-indent:-.35em;
}
.editorial__quote p::before{ content:"“"; color:var(--crimson); }
.editorial__quote p::after{ content:"”"; color:var(--crimson); }
.editorial__quote cite{
  font-style:normal; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone-dim);
}
.editorial__quote cite::before{ content:"— "; }

@media (max-width:880px){
  .editorial{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   INVITATION
   -------------------------------------------------------------------------- */

.invitation{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(168,27,51,.30), transparent 65%),
    var(--ink-2);
  border-top:1px solid rgba(239,231,221,.08);
  padding:clamp(6rem,12vw,10rem) var(--gut);
}
.invitation__inner{
  width:var(--shell); margin:0 auto; max-width:640px;
  text-align:center;
}
.invitation__inner .section-label{ justify-content:center; }
.invitation__inner .section-label::after{ display:none; }
.invitation__inner .display{ margin:1.5rem 0 1.2rem; }
.invitation__note{ color:var(--bone-dim); margin:0 auto 2.8rem; max-width:46ch; }

.form{
  display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center;
}
.form input{
  flex:1 1 260px;
  padding:1rem 1.2rem;
  background:rgba(239,231,221,.04);
  border:1px solid rgba(239,231,221,.20);
  border-radius:2px;
  color:var(--bone);
  font-family:var(--body); font-size:.95rem;
  transition:border-color .45s ease, background .45s ease;
}
.form input::placeholder{ color:rgba(156,145,138,.7); }
.form input:focus{
  outline:none;
  border-color:var(--crimson);
  background:rgba(239,231,221,.06);
}
.form__msg{
  min-height:1.4rem; margin:1rem 0 0;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gilt);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s var(--ease);
}
.form__msg.is-shown{ opacity:1; transform:none; }
.form__msg.is-error{ color:var(--lacquer); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot{
  width:var(--shell); margin:0 auto;
  padding:clamp(3.5rem,7vw,5.5rem) 0 3rem;
  display:grid; gap:2.2rem;
}
.foot__word{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.6rem,10vw,7rem);
  line-height:.95; letter-spacing:-.02em;
  color:rgba(239,231,221,.10);
}
.foot__sub{
  display:block; margin-top:.5rem;
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--bone-dim);
}
.foot__links{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
  padding-top:2rem;
  border-top:1px solid rgba(239,231,221,.09);
}
.foot__links a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim);
  transition:color .4s ease;
}
.foot__links a:hover{ color:var(--crimson); }
.foot__legal{
  margin:0; font-size:.7rem; letter-spacing:.16em;
  color:rgba(156,145,138,.6);
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease-soft), transform .95s var(--ease-soft);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }

/* hero reveals wait for the curtain */
.hero .reveal{ transition-delay:1.25s; }
.hero .reveal[data-delay="1"]{ transition-delay:1.4s; }
.hero .reveal[data-delay="2"]{ transition-delay:1.55s; }

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .ltr{ opacity:1; transform:none; }
  .manifesto__statement .split > i{ transform:none; }
  .seam__thread{ transform:scaleY(1); }
  .curtain{ display:none; }
}