/* Scientific Integrity Peptide Research storefront.
   Palette and layout: monochrome, high-contrast research catalog
   (off-white paper, near-black bands, white type, IBM Plex Mono labels,
   generous spacing). Typography is Montserrat plus IBM Plex Mono. SI chrome
   lockups from logo-vector/v3; blue is reserved as a tiny accent from the logo itself. */

@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F6F6F5;
  --paper-2:#EFEFEA;
  --white:#FFFFFF;
  --ink:#111114;
  --black:#070707;
  --charcoal:#2A2A2C;
  --muted:#5C5C60;
  --muted-2:#8A8A8E;
  --line:#E2E2DE;
  --line-dark:rgba(255,255,255,.12);
  --silver:#C8C8C4;
  --accent:#1E90FF; /* SI logo only — do not use as a fill */
  --header-h:72px;
  --radius:4px;
  --max:1160px;
  --shadow:0 20px 50px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.7}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.site-chrome{
  position:sticky;top:0;z-index:40;
}
.ruo-banner{
  background:var(--ink);
  color:var(--white);
  border-bottom:1px solid var(--line-dark);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  padding:8px 16px;
}
.ruo-banner span{color:var(--silver)}

.site-header{
  background:var(--black);
  color:var(--white);
  border-bottom:1px solid var(--line-dark);
}
.header-inner,.wrap{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white)}
.brand img,.brand img.logo-horizontal{height:44px;width:auto;max-width:min(360px,55vw)}
.brand .word{display:none}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:"Montserrat",sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--silver);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white);opacity:1}
.nav-cta{
  border:1px solid var(--white);
  color:var(--white)!important;
  padding:7px 14px;
}
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--white);padding:8px 10px;border-radius:var(--radius);cursor:pointer;font-family:"Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11px}

.hero{
  background:var(--black);
  color:var(--white);
  padding:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(92vh,820px);
  display:flex;
  align-items:center;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:3;padding:72px 0 64px}
.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 18px;
}
h1,h2,h3{font-family:"Montserrat",sans-serif;font-weight:600;letter-spacing:-.03em;color:inherit;margin:0 0 14px;line-height:1.08}
h1{font-size:clamp(40px,6vw,64px);font-weight:500}
h2{font-size:clamp(28px,4vw,44px);font-weight:500}
h3{font-size:22px}
.hero h1,.hero .lede,.footer-grid h3,.section-navy h2,.section-navy .kicker{color:var(--white)}
.lede{font-size:17px;color:var(--muted);max-width:38em;margin:0 0 28px;font-weight:400}
.hero .lede{color:var(--silver)}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:min(340px,100%);filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Montserrat",sans-serif;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:12px;border-radius:999px;padding:13px 22px;
  border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--black);color:var(--white)!important;border-color:var(--black)}
.btn-primary:hover{background:var(--charcoal);opacity:1}
.hero .btn-primary,.section-navy .btn-primary,.site-footer .btn-primary{
  background:var(--white);color:var(--black)!important;border-color:var(--white)
}
.hero .btn-primary:hover,.section-navy .btn-primary:hover{background:var(--paper);opacity:1}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)!important}
.hero .btn-ghost,.section-navy .btn-ghost,.site-footer .btn-ghost{border-color:var(--silver);color:var(--white)!important}
.btn-ghost:hover{opacity:1;border-color:currentColor}
.btn-add{padding:7px 12px;font-size:11px}
.btn-disabled,.btn[disabled]{opacity:.4;pointer-events:none}

.coa-strip{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.coa-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.coa-strip h2{font-size:22px;margin:0 0 4px;color:var(--ink)}
.coa-strip p{margin:0;color:var(--muted);font-size:14px}

.section{padding:80px 0}
.section-navy,.section-dark{background:var(--black);color:var(--white);border:0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.muted{color:var(--muted)}
.section-dark .muted,.section-navy .muted{color:var(--silver)}
.small{font-size:14px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card:hover{border-color:var(--ink)}
.card-art{
  background:#07070A;
  padding:16px 16px 8px;
  min-height:300px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.card-art img{width:100%;height:290px;object-fit:contain}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:22px;margin:0;color:var(--ink);letter-spacing:-.02em}
.card-desc{font-size:13px;color:var(--muted);margin:0}
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  border:1px solid var(--line);color:var(--muted);padding:3px 8px;border-radius:999px;
  background:transparent;
}
.pill.best{border-color:var(--ink);color:var(--ink)}
.price,.price-row{font-family:"IBM Plex Mono",monospace;color:var(--ink);margin:8px 0 0}
.price .amt,.card .from-price{font-size:20px;font-weight:500;letter-spacing:-.02em}
.price .per,.from-price .per{font-size:12px;color:var(--muted);letter-spacing:0}
.price-note,.card-more{font-size:13px;color:var(--muted);margin:8px 0 0}
.card-more{margin-top:auto;padding-top:10px}
.card-more a{letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:600}

.size-prices{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.size-prices li{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}
.size-prices .sz{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink)}
.size-prices .price{margin:0;font-size:13px}
.size-prices .btn-add{flex-shrink:0}

.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.product-hero > *{min-width:0}
.product-art{
  background:#07070A;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  overflow:hidden;
  max-width:100%;
}
.product-art img{width:100%;max-width:560px;height:auto;margin:0 auto;display:block}
.product-buy{margin-top:48px}
.size-table{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0}
.size-table th,.size-table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}
.size-table th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;font-weight:400}
.size-table td.lot,.size-table td.price{font-family:"IBM Plex Mono",monospace}
.size-table tr.is-best td{background:rgba(0,0,0,.03)}
.size-btn{cursor:pointer;font-family:inherit}
.size-btn[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.notice{
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:14px 16px;font-size:14px;color:var(--ink);margin:18px 0;
}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.section-dark .feature,.section-navy .feature{background:#111114;border-color:var(--line-dark);color:var(--silver)}
.feature h3{color:var(--ink)}
.section-dark .feature h3,.section-navy .feature h3{color:var(--white)}

form{display:grid;gap:14px;max-width:640px}
label{font-family:"Montserrat",sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--muted)}
input,textarea,select{
  width:100%;background:var(--white);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius);padding:12px 14px;font-family:"Montserrat",sans-serif;font-size:15px;
}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none}
textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:13px;color:var(--muted)}
.coa-box{display:flex;gap:10px;flex-wrap:wrap;max-width:720px}
.coa-box input{flex:1;min-width:240px}
.coa-result{margin-top:24px;max-width:720px}
.lot-list{display:grid;grid-template-columns:1fr;gap:0;margin-top:16px;font-size:14px}
.coa-library{width:100%;border-collapse:collapse;margin-top:12px}
.coa-library th,.coa-library td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.coa-library th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}
.coa-library .lot{font-family:"IBM Plex Mono",monospace;font-size:13px}
.coa-pending{color:var(--muted);font-size:13px}

.site-footer{background:var(--black);color:var(--silver);padding:56px 0 32px;border:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-logo,.footer-logo.logo-stacked{height:80px;width:auto;margin-bottom:14px}
.site-footer a{color:var(--white)}
.site-footer h3{color:var(--white);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.disclaimer{font-size:12px;line-height:1.65;color:var(--muted-2);border-top:1px solid var(--line-dark);padding-top:20px}
.legal-meta{margin-top:16px;font-size:12px;color:var(--muted-2)}
.contact-block{margin:6px 0}
hr.line{border:0;border-top:1px solid var(--line);margin:32px 0}

.stock{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stock.in_stock{color:var(--ink)}
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);color:var(--muted)}
.badge-in{color:var(--ink);border-color:var(--ink)}
.badge-out{color:var(--muted-2);border-color:var(--line)}
.badge-order,.badge-limited{color:var(--charcoal);border-color:var(--charcoal)}
.table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.size-table td.lot,.coa-library td.lot,.size-table .btn-add{white-space:nowrap}

.gate[hidden]{display:none !important}

.quote-tray{
  position:fixed;right:20px;bottom:20px;z-index:45;
  background:var(--black);color:var(--white);
  border:1px solid var(--line-dark);border-radius:8px;
  padding:12px 16px;min-width:260px;max-width:360px;
  box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.quote-tray[hidden]{display:none}
.quote-tray-inner{display:flex;flex-direction:column;gap:10px}
.quote-toggle{background:none;border:0;color:var(--white);font-family:"Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:600;cursor:pointer;text-align:left}
.quote-panel h2{font-size:16px;color:var(--white)}
.quote-panel ul{list-style:none;margin:0;padding:0;font-size:13px}
.quote-panel li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-dark)}
.quote-remove{background:none;border:0;color:var(--silver);cursor:pointer;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.quote-total{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--silver)}

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

@media (max-width:900px){
  .hero-grid,.product-hero,.grid,.features,.footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;background:var(--black);padding:16px 20px 20px;border-bottom:1px solid var(--line-dark);gap:14px}
  .site-header.open .nav{display:flex}
  .header-inner{position:relative}
  .hero{padding:48px 0 48px}
  .section{padding:56px 0}
  .coa-strip-inner{align-items:flex-start}
  .coa-library{min-width:560px}
  .size-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .size-table,.size-table tbody,.size-table tr,.size-table td{display:block;width:100%;min-width:0}
  .size-table{border-collapse:separate;border-spacing:0}
  .size-table tr{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 12px;padding:8px 12px 12px;background:var(--white)}
  .size-table td{border:0;padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .size-table td::before{content:attr(data-label);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .size-table td[data-label=""]{display:block;padding-top:10px}
  .size-table td[data-label=""]::before{content:none}
  .size-table td[data-label=""] .btn-add{width:100%}
  .size-table tr.is-active td:first-child{box-shadow:none}
  .size-table tr.is-active{outline:1px solid var(--ink)}
}
@media (max-width:600px){
  .wrap,.header-inner{width:min(var(--max),calc(100% - 32px))}
  .ruo-banner{font-size:10px;letter-spacing:.08em}
}


/* ------------------------------------------------------------------
   Entrance gate, hero motion, bottle cards, gift-box feature.
   Original SI motion (not a copy of any third-party assets).
   ------------------------------------------------------------------ */

html:not(.gate-ok){overflow:hidden}
html:not(.gate-ok) body{overflow:hidden}

.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(40,48,58,.55), transparent 60%),
    #070707;
  color:var(--silver);
  opacity:1;
  visibility:visible;
  transition:opacity .7s ease, visibility .7s ease;
}
html.gate-ok .gate{
  opacity:0;visibility:hidden;pointer-events:none;
}
.gate-card{
  width:min(560px,100%);
  background:#0B0B0C;
  color:var(--silver);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:40px 36px 36px;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.gate-logo{display:block;height:52px;width:auto;max-width:min(360px,100%);margin:0 auto 22px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.gate-card h2{color:var(--white);font-size:clamp(28px,5vw,40px);text-align:center}
.gate-card .kicker,.gate-card p{text-align:center}
.gate-card .actions{margin-top:22px;justify-content:center}
.gate-checks{display:flex;flex-direction:column;gap:12px;margin:22px 0 4px;text-align:left}
.gate-check{
  display:flex;align-items:flex-start;gap:12px;
  font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:0;
  text-transform:none;font-size:14px;color:var(--silver);
  line-height:1.45;cursor:pointer;
}
.gate-check input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin-top:1px;flex:0 0 20px;
  border:1px solid var(--silver);border-radius:3px;background:transparent;
  cursor:pointer;position:relative;
}
.gate-check input:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.gate-check input:checked{background:var(--white);border-color:var(--white)}
.gate-check input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #070707;border-width:0 2px 2px 0;transform:rotate(45deg);
}
#gate-accept:disabled,.btn[disabled]{opacity:.38;pointer-events:none;cursor:not-allowed}

/* Hero atmosphere + opening motion */
.hero-atmos,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-atmos{z-index:0;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-8px),0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-shade{z-index:2;background:linear-gradient(90deg,rgba(7,7,7,.72) 0%,rgba(7,7,7,.35) 42%,transparent 68%)}
.hero-word{
  position:absolute;right:-2vw;bottom:-6%;
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:clamp(180px,28vw,460px);line-height:.8;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  user-select:none;
}
.hero-cloud{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,210,220,.18),rgba(200,210,220,.08) 40%,transparent 70%);
  will-change:transform;
}
.hero-cloud.c1{width:75vw;height:55vh;left:-18vw;top:-8%;animation:si-drift-a 42s ease-in-out infinite alternate}
.hero-cloud.c2{width:65vw;height:50vh;right:-16vw;top:28%;animation:si-drift-b 54s ease-in-out infinite alternate}
.hero-particles{position:absolute;inset:0;overflow:hidden}
.hero-particles::before{
  content:"";position:absolute;left:0;top:100%;width:2px;height:2px;border-radius:50%;
  animation:si-rise 48s linear infinite;
  box-shadow:
    6vw 80px rgba(200,210,220,.55), 14vw 300px rgba(200,210,220,.35),
    22vw 140px rgba(200,210,220,.5), 31vw 520px rgba(200,210,220,.4),
    40vw 240px rgba(200,210,220,.35), 49vw 400px rgba(200,210,220,.45),
    58vw 60px rgba(200,210,220,.5), 67vw 360px rgba(200,210,220,.55),
    76vw 500px rgba(200,210,220,.4), 85vw 180px rgba(200,210,220,.5),
    93vw 620px rgba(200,210,220,.4);
}
.hero-mol{
  position:absolute;inset:0;z-index:1;opacity:.18;pointer-events:none;
}
.hero-copy{position:relative;z-index:3}
.hero-stage{
  position:relative;z-index:3;min-height:520px;
  display:flex;align-items:center;justify-content:center;
  transform:translate3d(calc(var(--mx,0)*18px),calc(var(--my,0)*10px),0);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
}
.hero-dial{position:absolute;inset:8% 6%;pointer-events:none}
.hero-halo{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(200,210,220,.16),transparent 68%);
  animation:si-breathe 6s ease-in-out infinite;
}
.hero-ring{
  position:absolute;inset:14%;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  animation:si-spin 80s linear infinite;
}
.hero-orbit{
  position:absolute;inset:4%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.1);
  animation:si-spin 50s linear infinite reverse;
}
.hero-vials{position:relative;width:min(420px,100%);aspect-ratio:3/4;animation:si-float 6.5s ease-in-out infinite}
.hero-vial{
  margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translate3d(0,36px,0) scale(.96);
  animation:si-vial-swap 12s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-vial:nth-child(1){animation-delay:0s}
.hero-vial:nth-child(2){animation-delay:4s}
.hero-vial:nth-child(3){animation-delay:8s}
.hero-vial img{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));position:relative}
.hero-shine{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:8px;
}
.hero-shine::before{
  content:"";position:absolute;top:-30%;left:-40%;width:36%;height:160%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 100%);
  animation:si-sweep 5.5s ease-in-out infinite;
  transform:translate3d(-120%,0,0) rotate(18deg);
}

/* Staggered text reveal — plays after the gate fades, or immediately if already accepted */
.hero .reveal{opacity:0;transform:translate3d(0,22px,0)}
html.gate-ok .hero.is-playing .reveal{animation:si-in .9s cubic-bezier(.2,.8,.2,1) forwards}
html.gate-ok .hero.is-playing .reveal:nth-child(1){animation-delay:.05s}
html.gate-ok .hero.is-playing .reveal:nth-child(2){animation-delay:.18s}
html.gate-ok .hero.is-playing .reveal:nth-child(3){animation-delay:.32s}
html.gate-ok .hero.is-playing .reveal:nth-child(4){animation-delay:.46s}

.hero.is-paused *,.hero.is-paused *::before,.hero.is-paused *::after{animation-play-state:paused !important}

/* Gift box / RESEARCH WITH INTEGRITY */
.feature-box{background:var(--black);color:var(--white);padding:80px 0}
.feature-box-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.feature-box-photo{margin:0;border-radius:6px;overflow:hidden;background:#07070A}
.feature-box-photo img{width:100%;height:auto;display:block}
.feature-box h2{color:var(--white);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.feature-box .lede{color:var(--silver)}

/* Scroll reveals + card hover lift/shine */
/* Hidden only when JS is running, so a no-JS catalog still shows every card. */
.js .js-reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .js-reveal.is-in{opacity:1;transform:none}
.card{transition:transform .35s ease,border-color .25s ease,box-shadow .35s ease;position:relative}
.card:hover{transform:translateY(-8px);border-color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.12);opacity:1}
.card-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.card:hover .card-art::after{transform:translateX(120%)}

.size-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.size-btn{cursor:pointer;background:transparent}
.size-btn[aria-pressed="true"]{outline:1px solid var(--ink)}
.size-table tr.is-active td{background:rgba(0,0,0,.045)}
.size-table tr.is-active td:first-child{box-shadow:inset 3px 0 0 var(--ink)}

@keyframes si-drift-a{to{transform:translate3d(16vw,-6vh,0) scale(1.12)}}
@keyframes si-drift-b{to{transform:translate3d(-18vw,-5vh,0) scale(.96)}}
@keyframes si-rise{to{transform:translate3d(0,-1800px,0)}}
@keyframes si-float{50%{transform:translate3d(0,-12px,0)}}
@keyframes si-breathe{50%{opacity:.55;transform:scale(1.07)}}
@keyframes si-spin{to{transform:rotate(360deg)}}
@keyframes si-sweep{
  0%{transform:translate3d(-140%,0,0) rotate(18deg);opacity:0}
  12%{opacity:1}
  40%{opacity:1}
  55%,100%{transform:translate3d(280%,0,0) rotate(18deg);opacity:0}
}
@keyframes si-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes si-vial-swap{
  0%{opacity:0;transform:translate3d(0,36px,0) scale(.96)}
  8%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  28%{opacity:1;transform:translate3d(0,-6px,0) scale(1.01)}
  33.33%{opacity:0;transform:translate3d(0,-30px,0) scale(1.05)}
  100%{opacity:0;transform:translate3d(0,-30px,0) scale(1.05)}
}

@media (prefers-reduced-motion:reduce){
  .hero-cloud,.hero-particles::before,.hero-halo,.hero-ring,.hero-orbit,
  .hero-vials,.hero-vial,.hero-shine::before,.hero .reveal,.js-reveal,.card,
  .card-art::after,.gate{animation:none !important;transition:none !important}
  .hero .reveal,.js-reveal{opacity:1;transform:none}
  .hero-vial{position:relative;opacity:0}
  .hero-vial:first-child{opacity:1;transform:none;position:relative}
  .hero-atmos,.hero-stage{transform:none}
  .card:hover{transform:none}
}
@media (max-width:900px){
  .hero{min-height:0}
  .hero-grid{padding:48px 0 40px;grid-template-columns:1fr}
  .hero-stage{min-height:380px;order:-1}
  .hero-vials{width:min(300px,80%)}
  .feature-box-grid{grid-template-columns:1fr}
  .hero-shade{background:linear-gradient(180deg,rgba(7,7,7,.15) 0%,rgba(7,7,7,.55) 70%)}
  .card-art,.card-art img{min-height:240px;height:240px}
  .gate-card{padding:28px 22px}
}