/* ============================================================
   kyoon.app — index
   ============================================================ */

:root{
  --ink:      #0c0b12;
  --ink-2:    #100e1a;
  --ink-3:    #16142270;
  --fg:       #f4f0ea;
  --muted:    #a09aae;
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.055);

  --rose:     #e2919f;
  --gold:     #f0b451;
  --clay:     #d5825c;
  --cream:    #e9dcc2;

  --serif:    "Cormorant Garamond", "Gowun Batang", "Nanum Myeongjo", Georgia, serif;
  --kor:      "Gowun Batang", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --sans:     "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
              "Malgun Gothic", "Segoe UI", Roboto, system-ui, sans-serif;

  --pad:      clamp(20px, 5vw, 80px);
  --maxw:     1240px;
  --ease:     cubic-bezier(.22,.68,.28,1);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* soft film grain + vignette over everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    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='.32'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.5;
}

img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background:var(--gold); color:#17131c; }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  background:rgba(255,255,255,.06);
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--rose),var(--gold),var(--clay));
  transition:width .1s linear;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px var(--pad);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(12,11,18,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-2);
  padding-top:12px; padding-bottom:12px;
}
.nav__logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--serif); font-size:22px; letter-spacing:.06em;
}
.nav__mark{ color:var(--gold); display:inline-flex; animation:twinkle 4s ease-in-out infinite; }
.nav__links{ display:flex; gap:clamp(14px,2.4vw,30px); font-size:13px; letter-spacing:.05em; color:var(--muted); }
.nav__links a{ position:relative; padding:4px 0; transition:color .3s; white-space:nowrap; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .35s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ right:0; }

@keyframes twinkle{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.86)} }

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:118px var(--pad) 92px;
  overflow:hidden;
}
.hero__glow{ position:absolute; inset:-10%; z-index:0; filter:blur(60px); }
.orb{
  position:absolute; border-radius:50%;
  transition:transform .9s var(--ease);
}
.orb--rose{ width:46vw; height:46vw; left:-8vw; top:2vw;
  background:radial-gradient(circle at 40% 40%, rgba(226,145,159,.30), transparent 66%); }
.orb--gold{ width:52vw; height:52vw; right:-14vw; top:-6vw;
  background:radial-gradient(circle at 50% 50%, rgba(240,180,81,.22), transparent 64%); }
.orb--clay{ width:44vw; height:44vw; right:6vw; bottom:-16vw;
  background:radial-gradient(circle at 50% 50%, rgba(213,130,92,.20), transparent 66%); }

.hero__floats{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.float{
  position:absolute; display:block; color:rgba(255,255,255,.22);
  transition:transform .9s var(--ease);
}
.float > *{ display:block; animation:drift 9s ease-in-out infinite; animation-delay:inherit; }
.float em{ font-family:var(--kor); font-style:normal; font-size:34px; }
.float--card{ width:44px; right:13%; top:19%; color:rgba(226,145,159,.42); }
.float--star{ width:26px; right:7%;  top:47%; color:rgba(240,180,81,.5);  animation-delay:-3s; }
.float--el{   right:25%; bottom:21%; color:rgba(213,130,92,.42); animation-delay:-5s; }
.float--el2{  right:36%; top:12%;    color:rgba(233,220,194,.24); animation-delay:-1.5s; }
.float--el2 em{ font-size:26px; }

@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-18px) rotate(4deg); }
}

.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; }

.hero__eyebrow{
  margin:0 0 22px;
  font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold);
}
.hero__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(42px, 8.4vw, 108px);
  line-height:1.06;
  letter-spacing:-.02em;
}
.hero__title .line{ display:block; }
.hero__title em{
  font-style:italic;
  background:linear-gradient(100deg, var(--rose) 0%, var(--gold) 48%, var(--clay) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__desc{
  margin:26px 0 0; max-width:46ch;
  font-family:var(--kor);
  font-size:clamp(14px,1.55vw,17px);
  color:#cec8d6;
  line-height:2;
  word-break:keep-all;
}
.hero__actions{ margin-top:34px; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.34em; color:var(--muted);
}
.hero__scroll span{
  width:1px; height:44px;
  background:linear-gradient(var(--gold), transparent);
  animation:scrollLine 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollLine{ 0%{transform:scaleY(.2);opacity:.3} 50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.2);opacity:.3} }

/* ---------- buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 28px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:14px; letter-spacing:.02em;
  background:rgba(255,255,255,.02);
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--brand, var(--gold));
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{ color:#14111a; border-color:var(--brand, var(--gold)); transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translate(3px,-3px); }
.btn:hover .btn__arrow--down{ transform:translateY(4px); }
.btn__icon{ display:inline-flex; width:17px; color:var(--brand, var(--gold)); transition:color .4s; }
.btn:hover .btn__icon{ color:#14111a; }
.btn__icon--glyph{
  width:22px; height:22px; justify-content:center; align-items:center;
  border-radius:50%; border:1px solid currentColor; font-size:11px;
}
.btn__icon--glyph em{ font-family:var(--kor); font-style:normal; line-height:1; }
.btn--ghost{ --brand:var(--cream); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative; z-index:2;
  padding:18px 0;
  border-block:1px solid var(--line-2);
  background:rgba(255,255,255,.015);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:34px;
  width:max-content;
  animation:slide 26s linear infinite;
  font-family:var(--serif); font-size:15px; letter-spacing:.3em;
  color:rgba(255,255,255,.34); white-space:nowrap;
}
.marquee__track i{ color:var(--gold); font-style:normal; font-size:11px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   SITES
   ============================================================ */
.sites{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(80px,12vw,150px) var(--pad) clamp(60px,9vw,110px);
}
.sites__label{
  margin:0 0 clamp(50px,7vw,90px);
  font-size:11px; letter-spacing:.4em; color:var(--muted);
}

.site{
  --brand:var(--gold);
  --brand-soft:rgba(240,180,81,.14);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:clamp(30px,6vw,84px);
  padding:clamp(40px,6vw,72px) 0;
  border-top:1px solid var(--line-2);
  scroll-margin-top:80px;
}
.site:first-of-type{ border-top:none; padding-top:0; }
.site--flip{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.site--flip .site__art{ order:2; }

.site[data-brand="cardcork"]{ --brand:#e2919f; --brand-2:#f0c46a; --brand-soft:rgba(226,145,159,.16); }
.site[data-brand="hopscope"]{ --brand:#f2b34b; --brand-2:#8fb6e8; --brand-soft:rgba(242,179,75,.14); }
.site[data-brand="sul"]     { --brand:#d5825c; --brand-2:#e9dcc2; --brand-soft:rgba(213,130,92,.16); }

.site__art{
  position:relative;
  aspect-ratio:1/.86;
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(90% 80% at 50% 20%, var(--brand-soft), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  transition:border-color .6s var(--ease);
}
.site:hover .site__art{ border-color:rgba(255,255,255,.16); }

.site__eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px;
  font-size:11px; letter-spacing:.3em; color:var(--brand);
}
.mini{ display:inline-flex; width:14px; }
.mini--glyph{
  width:20px; height:20px; align-items:center; justify-content:center;
  border:1px solid currentColor; border-radius:50%; font-size:10px;
}
.mini--glyph em{ font-family:var(--kor); font-style:normal; line-height:1; }

.site__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.4vw,64px);
  line-height:1.06; letter-spacing:-.01em;
}
.site[data-brand="sul"] .site__title{ font-family:var(--kor); font-size:clamp(30px,4.6vw,54px); }
.site__title em{ font-style:italic; color:var(--brand); }

.site__kor{
  margin:14px 0 0;
  font-family:var(--kor); font-size:clamp(15px,1.9vw,20px);
  color:var(--brand-2, var(--cream));
  word-break:keep-all;
}
.site__desc{
  margin:20px 0 0; max-width:44ch;
  font-family:var(--kor); font-size:15px; line-height:2.05;
  color:#b9b3c4; word-break:keep-all;
}

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; }
.tags li{
  padding:6px 13px; border:1px solid var(--line);
  border-radius:999px; font-size:10.5px; letter-spacing:.16em;
  color:var(--muted);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.site:hover .tags li{ border-color:var(--brand-soft); color:#d3cdda; }
.btn--brand{ margin-top:30px; }

/* ---------- artwork 1 : tarot deck ---------- */
.deck{
  position:relative;
  width:min(74%, 300px);
  aspect-ratio:1/1.1;
  display:grid; place-items:center;
}
.deck__glow{
  position:absolute; width:130%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(226,145,159,.28), transparent 62%);
  filter:blur(30px);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.6;transform:scale(.94)} 50%{opacity:1;transform:scale(1.04)} }

.card{
  position:absolute; left:50%; top:50%;
  width:58%;
  transform-origin:50% 118%;
  transform:translate(-50%,-50%) rotate(0deg) scale(.94);
  transition:transform 1.15s var(--ease), filter .6s var(--ease);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55));
}
.card--c{ z-index:3; transform:translate(-50%,-50%); }
.site__art.is-in .card--l{ transform:translate(-56%,-47%) rotate(-15deg) scale(.95); }
.site__art.is-in .card--r{ transform:translate(-44%,-47%) rotate(15deg) scale(.95); }
.site:hover .card--l{ transform:translate(-64%,-49%) rotate(-23deg) scale(.96); }
.site:hover .card--r{ transform:translate(-36%,-49%) rotate(23deg) scale(.96); }
.site:hover .card--c{ transform:translate(-50%,-55%) scale(1.05); }

.card__bg{ fill:#f6efe4; }
.card__bg--face{ fill:#fbf5ec; }
.card__frame{ fill:none; stroke:#c9a15e; stroke-width:1.1; opacity:.8; }
.card__ink{ stroke:#7b3448; fill:none; color:#7b3448; }
.card--c .card__ink{ stroke:#6d2f45; color:#6d2f45; }
.card__word{
  font-family:var(--serif); font-size:12px; letter-spacing:.32em;
  fill:#6d2f45; stroke:none; text-anchor:middle; opacity:.75;
}

/* ---------- artwork 2 : star sky ---------- */
.sky{
  position:relative;
  width:min(84%, 340px);
  aspect-ratio:1;
  display:grid; place-items:center;
}
.sky canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sky__ring{
  position:absolute; inset:4%;
  border:1px solid rgba(242,179,75,.22); border-radius:50%;
  animation:spin 46s linear infinite;
}
.sky__ring::after{
  content:""; position:absolute; top:-3px; left:50%;
  width:5px; height:5px; margin-left:-2.5px;
  background:var(--gold); border-radius:50%;
  box-shadow:0 0 10px 2px rgba(242,179,75,.7);
}
.sky__ring--in{ inset:22%; border-color:rgba(143,182,232,.2); animation-duration:30s; animation-direction:reverse; }
.sky__ring--in::after{ background:#8fb6e8; box-shadow:0 0 10px 2px rgba(143,182,232,.6); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.sky__star{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.6);
  animation:twinkle 3.4s ease-in-out infinite;
}
.sky__star--a{ top:18%; left:24%; }
.sky__star--b{ top:66%; left:78%; animation-delay:-1.2s; }
.sky__star--c{ top:34%; left:82%; animation-delay:-2.3s; width:2px; height:2px; }

.sky__badge{
  position:relative; z-index:2;
  width:34%; aspect-ratio:1;
  display:grid; place-content:center; text-align:center;
  border:1px solid rgba(242,179,75,.3); border-radius:50%;
  background:radial-gradient(circle, rgba(12,11,18,.9), rgba(12,11,18,.55));
  backdrop-filter:blur(2px);
}
.sky__badge b{ display:block; font-family:var(--serif); font-size:clamp(22px,4vw,34px); color:var(--gold); line-height:1; }
.sky__badge span{ font-size:9px; letter-spacing:.28em; color:var(--muted); }

/* ---------- artwork 3 : five elements wheel ---------- */
.wheel{
  position:relative;
  width:min(84%, 330px);
  display:grid; place-items:center;
}
.wheel__glow{
  position:absolute; width:92%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(213,130,92,.3), transparent 62%);
  filter:blur(34px);
  animation:breathe 8s ease-in-out infinite;
}
.wheel__svg{ position:relative; width:100%; overflow:visible; }
.wheel__rings circle{ fill:none; stroke:rgba(233,220,194,.16); stroke-width:1; }
.wheel__ring-in{ stroke:rgba(233,220,194,.26)!important; stroke-dasharray:3 7; }
.wheel__spin{ transform-origin:150px 150px; animation:spin 64s linear infinite; }
.wheel__web{ fill:rgba(213,130,92,.05); stroke:rgba(233,220,194,.2); stroke-width:1; }

.wheel__el circle{
  fill:rgba(12,11,18,.85);
  stroke:rgba(233,220,194,.32); stroke-width:1;
  transition:stroke .5s var(--ease), fill .5s var(--ease);
}
.wheel__el text{
  font-family:var(--kor); font-size:19px; text-anchor:middle;
  fill:rgba(233,220,194,.62);
  transition:fill .5s var(--ease);
}
.wheel__el.is-active circle{ stroke:var(--el-color); fill:rgba(12,11,18,.95); }
.wheel__el.is-active text{ fill:var(--el-color); }

.wheel__stem{
  font-family:var(--kor); font-size:52px; text-anchor:middle;
  fill:var(--cream);
  transition:opacity .45s var(--ease), fill .45s var(--ease);
}
.wheel__stem.is-fading{ opacity:0; }
.wheel__caption{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  margin:0; font-family:var(--kor); font-size:12px; letter-spacing:.24em;
  color:var(--muted); white-space:nowrap;
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing{
  position:relative; z-index:2;
  padding:clamp(90px,14vw,170px) var(--pad);
  text-align:center;
  overflow:hidden;
  border-top:1px solid var(--line-2);
  background:radial-gradient(80% 100% at 50% 100%, rgba(240,180,81,.10), transparent 65%);
}
.closing__stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 26%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 18%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.8px 1.8px at 62% 68%, rgba(242,179,75,.9), transparent),
    radial-gradient(1.2px 1.2px at 30% 78%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 88% 56%, rgba(226,145,159,.8), transparent),
    radial-gradient(1.2px 1.2px at 45% 12%, rgba(255,255,255,.6), transparent);
  opacity:.55;
  animation:twinkle 5s ease-in-out infinite;
}
.closing__eyebrow{ position:relative; margin:0 0 18px; font-size:11px; letter-spacing:.4em; color:var(--gold); }
.closing__title{
  position:relative; margin:0;
  font-family:var(--kor); font-weight:400;
  font-size:clamp(28px,5.4vw,58px); line-height:1.45;
  word-break:keep-all;
}
.closing__links{
  position:relative;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(38px,5vw,58px);
}
.chip{
  --brand:var(--gold);
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--kor); font-size:13px; color:var(--muted);
  background:rgba(255,255,255,.02);
  transition:transform .4s var(--ease), border-color .4s var(--ease),
             color .4s var(--ease), background .4s var(--ease);
}
.chip[data-brand="cardcork"]{ --brand:#e2919f; }
.chip[data-brand="hopscope"]{ --brand:#f2b34b; }
.chip[data-brand="sul"]     { --brand:#d5825c; }
.chip b{ font-weight:400; color:var(--fg); }
.chip__ic{ display:inline-flex; width:14px; color:var(--brand); }
.chip__ic--glyph{
  width:20px; height:20px; align-items:center; justify-content:center;
  border:1px solid currentColor; border-radius:50%; font-size:10px;
}
.chip__ic--glyph em{ font-style:normal; line-height:1; }
.chip:hover{
  transform:translateY(-3px);
  border-color:var(--brand);
  color:var(--fg);
  background:color-mix(in srgb, var(--brand) 12%, transparent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 28px;
  padding:38px var(--pad) 46px;
  border-top:1px solid var(--line-2);
  font-size:12px; color:var(--muted);
}
.foot__logo{ margin:0; font-family:var(--serif); font-size:20px; color:var(--fg); letter-spacing:.06em; }
.foot__logo span{ color:var(--muted); }
.foot__note{ margin:0; font-family:var(--kor); }
.foot__copy{ margin:0 0 0 auto; letter-spacing:.08em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .site{ grid-template-columns:1fr; gap:34px; }
  .site--flip .site__art{ order:0; }
  .site__art{ aspect-ratio:1/.8; }
  .hero__desc{ max-width:38ch; }
}

@media (max-width: 640px){
  body{ line-height:1.7; }
  .nav__links{ font-size:11px; gap:14px; }
  .nav__logo{ font-size:19px; }
  .hero{ padding-top:104px; padding-bottom:86px; min-height:92svh; }
  .hero__eyebrow{ letter-spacing:.3em; font-size:11px; }
  .hero__scroll{ display:none; }
  .float--card{ width:34px; right:6%; top:13%; }
  .float--star{ right:12%; top:52%; }
  .float--el{ right:7%; bottom:5%; opacity:.7; }
  .float--el2{ display:none; }
  .site__art{ aspect-ratio:1/.92; border-radius:18px; }
  .deck{ width:min(80%, 240px); }
  .site__desc{ font-size:14px; line-height:1.95; }
  .btn{ padding:13px 22px; font-size:13px; }
  .chip{ width:100%; justify-content:center; }
  .foot{ flex-direction:column; gap:8px; }
  .foot__copy{ margin:6px 0 0; }
}

@media (max-width: 380px){
  .site__art{ aspect-ratio:1/1; }
  .btn{ font-size:12px; gap:9px; }
}

/* ============================================================
   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!important; transform:none!important; }
}