/* ZUR. Design System v2 · charcoal house, colored sparks */
:root{
  --bg:#0A0A0B; --bg2:#101012; --panel:#151517; --line:rgba(255,255,255,.08);
  --ink:#F2EFE9; --dim:#A39E93; --faint:#8B7F69;
  --shell:#0E0E10;
  /* derived, not chosen. a11y.label_on("#463824") -> #B1A38F, where #463824 is the LIGHTEST
     composite any .case-card .visual gradient can reach (its radial at full alpha over the
     lighter linear stop). --dim measures 4.25 there and misses; --faint measures 2.88.
     Do not hand-tune this: re-run label_on() if a gradient changes. */
  --label-vis:#B1A38F;
  /* type scale -- mirrors a11y.py SCALE. 1rem = 16px and root font-size is never set.
     --fs-label is the floor: nothing on this site goes under 12px. */
  --fs-label:.75rem;    /* 12 */
  --fs-meta:.8125rem;   /* 13 */
  --fs-sm:.875rem;      /* 14 */
  --fs-base:1rem;       /* 16 */
  --fs-lead:1.0625rem;  /* 17 */
  --gold:#E0A94F; --gold2:#F5D9A8; --brass:#B08D57; --ember:#FF5C1E; --flame2:#B4552D;
  --disp:'Poppins','Heebo',sans-serif;
  --body:'Manrope','Assistant',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --fire:linear-gradient(100deg,#F5D9A8 0%,#E0A94F 45%,#FF5C1E 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.75;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:998;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes pageIn{from{opacity:1}to{opacity:0;visibility:hidden}}
body::after{content:"";position:fixed;inset:0;background:#050506;z-index:1200;pointer-events:none;animation:pageIn .9s ease .15s forwards}
::selection{background:var(--gold);color:#0A0A0B}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;z-index:1300;background:var(--panel);color:var(--ink);
  border:1px solid var(--gold);border-radius:8px;padding:10px 18px;font-size:var(--fs-meta)}
.skip:focus{inset-inline-start:8px}
a{color:inherit;text-decoration:none}
/* height:auto is not cosmetic. The width/height attributes on <img> are presentational hints
   that stay in force as a used height whenever CSS sets width alone -- .founder .strike img
   did exactly that and rendered the ZUR wordmark at 360x457 instead of 360x161, a 2.84x
   vertical stretch. Measured in Chrome, before and after. Keeping the attributes plus
   height:auto still gives aspect-ratio: auto W/H, so CLS protection is unchanged.
   Enforced by _build/gate.py: any <img> carrying a height attribute must resolve to
   height:auto or to an explicit CSS height. */
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:var(--disp)}
.mono{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
.fire-text{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}

/* NAV · fixed physical layout in both languages: logo left, links center, language right */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;direction:ltr;
  padding:20px 44px;background:rgba(10,10,11,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav .brand{justify-self:start;display:flex;align-items:center}
.nav .brand img{height:19px;width:auto}
.nav .links{justify-self:center;display:flex;gap:28px;align-items:center}
html[lang="he"] .nav .links{direction:rtl}
.nav .links a{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.2em;color:var(--dim);transition:color .25s;white-space:nowrap}
.nav .links a:hover{color:var(--gold2)}
.nav .lang{border:1px solid var(--line);border-radius:99px;padding:5px 14px;color:var(--dim);transition:all .25s;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em}
.nav .lang:hover{border-color:var(--gold);color:var(--gold2)}
@media(max-width:820px){.nav{padding:16px 20px}.nav .links{gap:14px}}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:120px 24px 80px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-25%;left:50%;transform:translateX(-50%);width:1000px;height:1000px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,169,79,.13),transparent 60%);filter:blur(8px)}
#embers{position:absolute;inset:0;pointer-events:none}
.hero>*{position:relative}
.hero-h1{margin:0;line-height:0}
.hero .lockup{width:min(560px,88vw);height:auto;margin-inline:auto}
.nav .right{justify-self:end;display:flex;align-items:center;gap:10px}
.nav .portal{border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:99px;padding:5px 14px;
  color:var(--gold);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;transition:all .25s;white-space:nowrap}
.nav .portal:hover{background:var(--gold);color:#0A0A0B}
@media(max-width:560px){.nav .portal{display:none}}
.hero .sub-en{margin-top:34px;font-size:clamp(1.05rem,2.3vw,1.45rem);color:var(--dim);letter-spacing:.02em}
.hero .sub-en b{color:var(--ink);font-weight:600}
.hero .sub-he{margin-top:12px;font-family:'Heebo',sans-serif;font-weight:600;font-size:clamp(1.05rem,2.4vw,1.5rem);color:var(--faint)}
.hero .cta-row{display:flex;gap:16px;margin-top:48px;flex-wrap:wrap;justify-content:center;width:100%}
.btn{display:inline-block;padding:14px 36px;border-radius:99px;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.2em;transition:all .3s;cursor:pointer;will-change:transform}
.btn.gold{border:1px solid var(--gold);color:var(--gold)}
.btn.gold:hover{background:var(--fire);border-color:transparent;color:#0A0A0B;box-shadow:0 0 50px rgba(255,92,30,.35)}
.btn.ghost{border:1px solid var(--line);color:var(--dim)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold2)}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.34em;color:var(--faint)}

/* FUSE (scroll progress) */
.fuse{position:fixed;top:0;bottom:0;inset-inline-end:0;width:3px;z-index:99;background:rgba(255,255,255,.04)}
.fuse .burn{position:absolute;top:0;inset-inline-end:0;width:100%;height:0%;background:linear-gradient(180deg,#B4552D,#E0A94F)}
.fuse .tip{position:absolute;inset-inline-end:-4px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle,#F5D9A8 0%,#FF5C1E 55%,transparent 75%);filter:blur(.5px);transform:translateY(-6px)}
@media(max-width:820px){.fuse{display:none}}

/* SECTION SHELL */
section{max-width:1140px;margin:0 auto;padding:120px 44px 20px}
.sec-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:52px}
.sec-head .num{font-family:var(--mono);color:var(--gold);font-size:var(--fs-meta)}
.sec-head h2{font-weight:700;font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:.01em;
  background:linear-gradient(100deg,var(--ink) 0 60%,var(--gold2) 75%,var(--ink) 90%);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.6s ease .3s}
.sec-head.on h2,.reveal.on .sec-head h2{background-position:0 0}
.sec-head .side-label{margin-inline-start:auto;font-family:var(--mono);color:var(--faint);font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;direction:ltr}
.lead{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.95;max-width:840px;color:var(--dim)}
.lead b{color:var(--ink);font-weight:600}
.lead .g{color:var(--gold2)}

/* MANIFESTO v2 */
.manifesto{margin-top:120px;padding:130px 44px;border-block:1px solid var(--line);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 110%,rgba(255,92,30,.10),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg))}
.manifesto .m-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.4em;color:var(--faint);margin-bottom:36px;text-transform:uppercase}
.manifesto .line{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.8vw,2.9rem);line-height:1.6;max-width:900px;margin:0 auto;letter-spacing:.005em}
.manifesto .line .mute{color:var(--faint);font-weight:600}
.manifesto .line em{font-style:normal;background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.manifesto .m-f{margin-top:40px;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.3em;color:var(--dim);direction:ltr}
.manifesto .m-f b{color:var(--gold);font-weight:400}

/* ARMS */
.arms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
@media(max-width:900px){.arms{grid-template-columns:1fr}}
.arm{border:1px solid var(--line);border-radius:18px;padding:42px 34px;background:var(--panel);position:relative;overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s}
.arm::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--acc,var(--gold));opacity:.65;transition:width .35s,opacity .35s}
.arm:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 60px color-mix(in srgb,var(--acc) 12%,transparent)}
.arm:hover::after{width:6px;opacity:1}
.arm .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.26em;text-transform:uppercase;color:var(--acc,var(--gold))}
.arm h3{font-size:1.45rem;font-weight:700;margin:14px 0 12px}
.arm p{font-size:var(--fs-base);color:var(--dim)}
.arm p b{color:var(--ink);font-weight:600}
.arm .arm-num{position:absolute;top:26px;inset-inline-end:30px;font-family:var(--mono);font-size:var(--fs-label);color:var(--faint)}

/* CASE CARDS · each brings its own color */
.case-card{--acc:#E0A94F;display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:34px;background:var(--panel);
  transition:border-color .35s,box-shadow .35s,transform .2s;transform-style:preserve-3d;will-change:transform}
.case-card:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 80px color-mix(in srgb,var(--acc) 14%,transparent)}
.case-card .visual{min-height:340px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.case-card .content{padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.case-card .idx{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.24em;color:var(--acc);direction:ltr}
.case-card h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;margin:12px 0 4px;direction:ltr}
.case-card .subtitle{font-family:'Heebo',sans-serif;font-weight:500;color:var(--faint);font-size:var(--fs-base)}
.case-card p{color:var(--dim);font-size:var(--fs-base);margin-top:14px;max-width:430px}
.case-card p b{color:var(--ink);font-weight:600}
.case-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.case-tags span{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;padding:5px 12px;border:1px solid var(--line);border-radius:99px;color:var(--dim);transition:all .3s}
.case-card:hover .case-tags span{border-color:color-mix(in srgb,var(--acc) 40%,transparent);color:color-mix(in srgb,var(--acc) 80%,white)}
.case-card .open{margin-top:30px;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.22em;color:var(--acc)}
@media(max-width:900px){.case-card{grid-template-columns:1fr}.case-card .visual{min-height:220px}}

/* ARCHIVE */
.archive-row{display:flex;align-items:baseline;gap:26px;padding:22px 8px;border-bottom:1px solid var(--line);transition:all .25s;position:relative}
.archive-row:hover{background:rgba(255,255,255,.02);padding-inline-start:18px}
.archive-row .an{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);min-width:34px;direction:ltr}
.archive-row h4{font-weight:600;font-size:var(--fs-lead);letter-spacing:.02em}
.archive-row .cat{margin-inline-start:auto;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;color:var(--faint);direction:ltr;text-align:end}
.archive-row:hover h4{color:var(--gold2)}

/* FOUNDER */
.founder{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center}
@media(max-width:900px){.founder{grid-template-columns:1fr}}
.founder .strike{display:flex;justify-content:center}
.founder .strike img{width:min(360px,78vw);filter:drop-shadow(0 0 60px rgba(255,92,30,.10))}
.founder h3{font-size:1.8rem;font-weight:700;margin-bottom:16px}
.founder h3 em{font-style:normal;background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.founder p{color:var(--dim);font-size:var(--fs-base);max-width:540px}
.founder p b{color:var(--ink);font-weight:600}

/* CONTACT */
.contact{text-align:center;padding-bottom:60px}
.contact h2{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:700;letter-spacing:.01em;line-height:1.2}
.contact h2 em{font-style:normal;background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact .sub{margin-top:18px;color:var(--faint);font-size:var(--fs-lead)}
.contact .btn{margin-top:44px}

footer{margin-top:100px;padding:54px 44px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;direction:ltr}
footer .fmark{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.26em;color:var(--faint)}
footer .fmark .ig{color:var(--ember)}

/* CASE PAGE */
.case-hero{min-height:76vh;display:flex;flex-direction:column;justify-content:center;padding:150px 44px 70px;max-width:1140px;margin:0 auto;position:relative}
.case-hero .crumb{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.24em;color:var(--faint);direction:ltr;text-align:start}
.case-hero .crumb a{color:var(--acc,var(--gold))}
.case-hero h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:700;letter-spacing:.005em;line-height:1.05;margin-top:22px;direction:ltr;text-align:start}
.case-hero .he-title{font-family:'Heebo',sans-serif;font-weight:600;font-size:clamp(1.1rem,2.6vw,1.55rem);color:var(--dim);margin-top:16px}
.case-hero .meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.case-hero .meta div{font-size:var(--fs-sm);color:var(--dim)}
.case-hero .meta b{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em;color:var(--acc,var(--gold));text-transform:uppercase;margin-bottom:4px;font-weight:400}
.tbi{max-width:1140px;margin:0 auto;padding:40px 44px}
.tbi-block{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:56px 0;border-top:1px solid var(--line)}
@media(max-width:820px){.tbi-block{grid-template-columns:1fr;gap:14px}}
.tbi-block .label{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.3em;color:var(--acc,var(--gold));direction:ltr;text-align:start}
.tbi-block .label span{color:var(--faint);display:block;margin-top:6px;font-size:var(--fs-label);letter-spacing:.2em}
.tbi-block p{color:var(--dim);font-size:var(--fs-lead);line-height:2;max-width:720px}
.tbi-block p b{color:var(--ink);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1140px;margin:30px auto 0;padding:0 44px}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat{border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--panel);text-align:center;transition:border-color .3s,transform .3s}
.stat:hover{border-color:color-mix(in srgb,var(--acc,#E0A94F) 40%,transparent);transform:translateY(-4px)}
.stat .v{font-family:var(--disp);font-size:2rem;font-weight:700;color:var(--acc,var(--gold2));direction:ltr}
.stat .l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;color:var(--faint);text-transform:uppercase;margin-top:6px}
/* SHOWCASE · curated wow instead of live entry */
.showcase{max-width:1140px;margin:90px auto 0;padding:0 44px}
.showcase .frame-head{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--panel);border:1px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0;direction:ltr}
.showcase .dots span{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2c2c2f;margin-right:5px}
.showcase .url{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);letter-spacing:.1em}
.showcase .frame-head .badge{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;color:var(--acc,var(--gold));border:1px solid color-mix(in srgb,var(--acc,#E0A94F) 40%,transparent);border-radius:99px;padding:4px 12px}
.showcase .shell{border:1px solid var(--line);border-radius:0 0 16px 16px;background:
  radial-gradient(ellipse 70% 80% at 50% 0%,color-mix(in srgb,var(--acc,#E0A94F) 7%,transparent),transparent 60%),#0E0E10;overflow:hidden}
.showcase .gallery{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px;direction:ltr}
.showcase .gallery img{height:340px;width:auto;border-radius:10px;scroll-snap-align:center;border:1px solid var(--line);flex-shrink:0}
@media(max-width:820px){.showcase .gallery img{height:220px}}
.showcase .poster{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:64px 30px;text-align:center}
.showcase .poster .plogo{max-width:min(420px,70vw);max-height:150px;width:auto;filter:drop-shadow(0 12px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px color-mix(in srgb,var(--acc,#E0A94F) 16%,transparent))}
.wow-chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:720px}
.wow-chips span{font-size:var(--fs-sm);color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:9px 20px;background:rgba(255,255,255,.02)}
.wow-chips span b{color:var(--ink);font-weight:600}
.clip-slot{display:flex;align-items:center;gap:14px;border:1px dashed color-mix(in srgb,var(--acc,#E0A94F) 35%,transparent);border-radius:99px;padding:10px 26px;color:var(--faint);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;direction:ltr}
.clip-slot .play{width:30px;height:30px;border-radius:50%;border:1px solid var(--acc,var(--gold));display:flex;align-items:center;justify-content:center;color:var(--acc,var(--gold));font-size:var(--fs-meta)}
.vlabel{position:absolute;bottom:18px;inset-inline-start:22px;font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.18em;color:var(--label-vis);direction:ltr;white-space:nowrap}
/* THE SET LIVES HERE. Five cards used to hold four different kinds of thing in this column: a
   drawn SVG, a client wordmark on a baked-in black box, a full colour logo and a photograph.
   One kind now: one symbol, trimmed to its own ink, in the card's own accent, in the same box.
   Sizing is by INK and not by canvas -- every file ships trimmed and object-fit:contain does the
   rest -- which is the rule zurlogo.place() already enforces for the ZUR mark (HANDOFF 9).
   height is fixed in px, never a %: .visual's height comes from the content column beside it, so
   a % here would resolve against an indefinite box and land differently per engine. */
.case-card .visual .sym{width:min(210px,50%);height:190px;object-fit:contain;
  filter:drop-shadow(0 0 34px color-mix(in srgb,var(--acc) 20%,transparent))}
@media(max-width:900px){.case-card .visual .sym{height:132px}}
.case-next{max-width:1140px;margin:110px auto 0;padding:60px 44px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.case-next a{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.22em;color:var(--gold)}
.case-next a:hover{color:var(--gold2)}

/* PRINT GALLERY */
.cards-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1140px;margin:80px auto 0;padding:0 44px}
@media(max-width:820px){.cards-demo{grid-template-columns:1fr 1fr}}
.gcard{aspect-ratio:2.5/3.5;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);transition:transform .35s,box-shadow .35s}
.gcard:hover{transform:translateY(-10px) rotate(-2deg);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.gcard .ct{font-family:'Heebo',sans-serif;font-weight:800;font-size:1.25rem}
.gcard .cb{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--faint);direction:ltr}

/* HEBREW PAGES */
html[lang="he"] .nav .links a:not(.lang){font-family:var(--body);font-weight:600;font-size:var(--fs-meta);letter-spacing:.02em;text-transform:none}
html[lang="he"] .lead,html[lang="he"] .arm p,html[lang="he"] .case-card p,html[lang="he"] .tbi-block p,html[lang="he"] .founder p{font-family:'Assistant',sans-serif}
html[lang="he"] h1,html[lang="he"] h2,html[lang="he"] h3,html[lang="he"] h4{font-family:'Heebo',sans-serif;font-weight:800}
html[lang="he"] .archive-row h4{font-weight:700}
html[lang="he"] .hero .sub-en{font-family:'Assistant',sans-serif;font-weight:400}

/* MOTION */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.on{opacity:1;transform:none}
.spark-cursor{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(224,169,79,.07),transparent 65%);transform:translate(-50%,-50%);transition:opacity .4s}
@media(pointer:coarse){.spark-cursor{display:none}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  body::after{animation-duration:.01s}
}