@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   GIIIFT Reveal Flow — host-agnostic module (extracted from reveal-lab.html)
   All selectors are scoped under `.gff` so the module can't leak into a host.
   Keyframes are renamed `rf-*`. CSS custom props are defined on `.gff` so the
   module is self-contained. Background is transparent so the HOST shows through.
   ──────────────────────────────────────────────────────────────────────── */

.gff{
  /* self-contained design tokens (copied from reveal-lab :root) */
  --void:#05080b; --ink:#f3f4f2; --mint:#00FF9D;
  --serif:'EB Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color:var(--ink); font-family:var(--sans); background:transparent;
  /* The flow overlays the host full-screen (transparent → the host's aurora shows THROUGH it).
     Only the FEATURED art reveal is scaled down (it ran tight at full size); the box screen, the
     collection grid, and the edu popup fill the whole page. */
  position:fixed; inset:0;
}
.gff *{box-sizing:border-box;margin:0;padding:0}

.gff .intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
/* demo-box intro (the Beaded Citadel openable box) */
.gff .demo-box{display:none}
.gff .intro.box-mode .line,.gff .intro.box-mode h1,.gff .intro.box-mode #rfx-intro-sub,.gff .intro.box-mode .btn-ghost{display:none}
.gff .intro.box-mode .demo-box{display:flex;flex-direction:column;align-items:center;gap:78px}   /* clears the box's 3D tilt overhang so the hint sits below, not over it */
.gff .demo-box-stage{position:relative;display:grid;place-items:center;perspective:1400px}
.gff .demo-box-hint{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(0,255,157,.78);cursor:pointer;animation:rf-hintPulse 2.4s ease-in-out infinite}
@keyframes rf-hintPulse{0%,100%{opacity:.5}50%{opacity:1}}
.gff .intro.gone{opacity:0;pointer-events:none;transform:scale(1.04)}
.gff .intro .line{width:1px;height:90px;background:linear-gradient(transparent,var(--mint),transparent);opacity:.6;margin-bottom:30px}
.gff .intro h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:38px;letter-spacing:-.01em}
.gff .intro p{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:rgba(243,244,242,.5);margin:14px 0 38px}
.gff .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--ink);padding:15px 38px;border-radius:99px;font:600 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;cursor:pointer;overflow:hidden;position:relative;transition:color .4s var(--ease)}
.gff .btn-ghost::before{content:'';position:absolute;inset:0;background:var(--mint);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.gff .btn-ghost:hover{color:#04130c;border-color:var(--mint)} .gff .btn-ghost:hover::before{transform:translateY(0)}

.gff .gf-stage{position:relative;z-index:30;width:100%;opacity:0;pointer-events:none;transition:opacity .8s var(--ease);transform:scale(.8);transform-origin:center center}   /* the featured art reveal runs tight at full size → scale it; box/collection/edu stay full-page */
.gff .gf-stage.active{opacity:1;pointer-events:auto}
.gff .reveal-el{opacity:0;transform:translateY(64px)}
.gff .gf-stage.active .reveal-el{animation:rf-floatUp 1.05s var(--ease) forwards;animation-delay:calc(var(--i,0) * .16s)}
@keyframes rf-floatUp{to{opacity:1;transform:var(--rest,translateY(0))}}
/* spotlight vignette — a soft black radial that fades IN as the box opens / cards reveal, then disappears.
   Sits behind the stage (z<30) so it dims the host backdrop, never the revealed cards. */
.gff #rfx-vignette{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(circle at 50% 46%,transparent 16%,rgba(0,0,0,.42) 54%,rgba(0,0,0,.92) 100%)}
.gff #rfx-vignette.in{opacity:1}

/* ── FEATURED single-art editorial layout ── */
.gff .feat{display:flex;flex-direction:column;align-items:center;gap:36px;max-width:1180px;margin:0 auto;padding:0 32px 64px;width:100%}
.gff .feat-band{position:relative;display:grid;place-items:center;width:100%;min-height:100vh}   /* centre the comp in the viewport (the .gff transform scales; no host-zoom reflow) */
/* 1-art sequenced reveal: intro note card → fade → art center → info around */
.gff .feat-intro{position:absolute;inset:0;display:grid;place-items:center;z-index:12;transition:opacity .8s var(--ease)}
.gff .feat-intro.gone{opacity:0;pointer-events:none}
.gff .feat-intro .fi-card{position:relative;left:auto;top:auto;width:min(460px,90vw);height:min(700px,80vh);transform:scale(.78);transition:transform .7s var(--ease)}
.gff .gf-stage.active .feat-intro .fi-card{transform:none}   /* grows out of the flash where the box was */
.gff .feat-comp .f-art{opacity:0;transform:scale(.92);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.gff .feat-comp.show-art .f-art{opacity:1;transform:none}
.gff .feat-comp .f-info,.gff .feat-comp .f-yours,.gff .feat-comp .f-note{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.gff .feat-comp.show-info .f-info,.gff .feat-comp.show-info .f-yours,.gff .feat-comp.show-info .f-note{opacity:1;transform:var(--rest,none)}
/* the LEFT info card lands first; the RIGHT cards (note + actions) follow a beat later */
.gff .feat-comp.show-info .f-note,.gff .feat-comp.show-info .f-yours,.gff .feat-comp.show-info .f-collection{transition-delay:1s}
.gff .art-wrap{position:relative}   /* sized to the art; the cards anchor to its edges */
/* glass card shared look */
.gff .glass{background:rgba(18,21,27,.42);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 80px -26px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.07);border-radius:22px}

/* note + photos */
/* note: tucks onto the art's upper-RIGHT edge, a tiny overlap, nudged up + rotated */
/* the note reads over the busy aurora → bigger type + a more solid (less see-through) glass so it's easy to read */
.gff .f-note{position:absolute;z-index:4;left:calc(100% - 26px);top:-7%;width:326px;max-width:46vw;padding:30px 30px;display:flex;flex-direction:column;--rest:rotate(-2.5deg);
  background:rgba(13,16,22,.8);backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15);border-color:rgba(255,255,255,.16)}
.gff .f-note .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,255,157,.92);margin-bottom:17px}
.gff .f-note .msg{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.42;color:#f7f8f5}
.gff .f-note .rule{width:40px;height:1px;background:rgba(255,255,255,.32);margin:20px 0}
.gff .f-note .sig{font-family:var(--serif);font-size:18.5px;color:#f1f2ee}
.gff .f-note .photos{display:flex;gap:9px;margin-top:20px}
.gff .f-note .pol{width:62px;height:62px;border-radius:3px;background:rgba(255,255,255,.92);padding:4px 4px 10px;box-shadow:0 10px 18px rgba(0,0,0,.35);transform:rotate(var(--pr,-4deg))}
.gff .f-note .pol span{display:block;width:100%;height:100%;border-radius:2px}

/* the piece arrives FRAMED (gallery-style) and GIIIFT-wrapped; the wrap lifts away on reveal */
.gff .f-art{position:relative;z-index:2;display:inline-flex;perspective:1300px}
.gff .art-frame{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:7px;
  background:linear-gradient(135deg,#262931 0%,#15171d 46%,#090b0f 100%);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.86),0 18px 42px rgba(0,0,0,.5),inset 0 2px 2px rgba(255,255,255,.15),inset 0 -3px 9px rgba(0,0,0,.72),inset 0 0 0 1px #05070a}
.gff .art-frame::before{content:'';position:absolute;left:13px;right:13px;top:13px;bottom:13px;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(0,255,157,.22),inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 18px rgba(0,255,157,.06)}
.gff .art-mat{position:relative;display:flex;flex-direction:column;align-items:center;padding:26px 28px 0;border-radius:2px;background:linear-gradient(160deg,#1e2128,#14161b);
  box-shadow:inset 0 10px 22px rgba(0,0,0,.62),inset 0 2px 6px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06)}
.gff .art-canvas{position:relative;height:min(66vh,580px);aspect-ratio:var(--ar,1);max-width:min(56vw,560px);border-radius:1px;
  background:var(--art,#222);background-size:cover;background-position:center;
  box-shadow:0 3px 14px rgba(0,0,0,.7),inset 0 0 26px rgba(0,0,0,.42)}
@media (min-width:1000px){ .gff .art-canvas{height:min(74vh,680px);max-width:min(60vw,650px)} }   /* a little larger on desktop */
.gff .art-canvas .art-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:1px}   /* animated NFT (mp4) */
.gff .art-canvas::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(48deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 48%,rgba(0,0,0,.22) 100%)}
.gff .art-canvas .tag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.42);padding:5px 9px;border-radius:7px;backdrop-filter:blur(6px)}
/* the artist's name, GIIIFT-coloured letters, centred in the bottom mat band (between art + frame) */
.gff .art-plaque{display:flex;align-items:center;justify-content:center;width:100%;height:76px;
  font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);letter-spacing:.03em;color:#f3f4f2;text-align:center;white-space:nowrap}
.gff .art-plaque i{font-style:normal}
.gff .art-plaque .a{color:#FF3B6F}.gff .art-plaque .b{color:#FFD93D}.gff .art-plaque .c{color:#00FF9D}
/* the GIIIFT gift wrap (covers the frame) — recolored to GIIIFT: dark + mint, GIIIFT text on the tag */
.gff .art-gwrap{position:absolute;inset:0;z-index:6;border-radius:7px;overflow:hidden;transform-origin:center top;
  transition:transform 1.05s cubic-bezier(.5,0,.2,1),opacity .9s ease;
  box-shadow:0 40px 90px -22px rgba(0,0,0,.75),inset 0 1px 1px rgba(255,255,255,.28),inset 0 -3px 14px rgba(0,0,0,.42)}
/* the wrap is the box's OWN material: the beaded-citadel video on the box's teal→purple palette */
.gff .art-gwrap .paper{position:absolute;inset:0;z-index:0;overflow:hidden;border:1px solid rgba(0,0,0,.4);background:linear-gradient(135deg,#0c2b30,#2c1740)}
.gff .art-gwrap .paper .pvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gff .art-gwrap .paper::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 90% at 26% 14%,rgba(214,251,255,.14),transparent 48%),radial-gradient(150% 120% at 50% 122%,rgba(0,0,0,.5),transparent 60%)}   /* soft sheen so it reads as a wrapped surface */
.gff .art-gwrap .foil{position:absolute;inset:0;opacity:.42;mix-blend-mode:screen;background-image:radial-gradient(circle,var(--mint) 1.4px,transparent 1.9px),radial-gradient(circle,rgba(255,217,61,.55) 1.1px,transparent 1.6px);background-size:34px 34px,60px 60px;background-position:0 0,24px 30px}
/* satin ribbon: a soft length-wise sheen (no plastic white core), sitting ON the paper with a real cast shadow */
.gff .art-gwrap .rib{position:absolute;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.gff .art-gwrap .rib-v{width:40px;height:100%;left:50%;transform:translateX(-50%);z-index:1;background:linear-gradient(to right,#04181b 0%,#0c3a3e 13%,#1f7a75 33%,#54cec6 47%,#93ebe4 50.5%,#54cec6 54%,#1f7a75 67%,#0c3a3e 87%,#04181b 100%)}
.gff .art-gwrap .rib-h{width:100%;height:40px;top:50%;transform:translateY(-50%);z-index:2;background:linear-gradient(to bottom,#04181b 0%,#0c3a3e 13%,#1f7a75 33%,#54cec6 47%,#93ebe4 50.5%,#54cec6 54%,#1f7a75 67%,#0c3a3e 87%,#04181b 100%)}
.gff .art-gwrap .bow{position:absolute;left:50%;top:50%;width:124px;height:124px;transform:translate(-50%,-50%);z-index:3;filter:drop-shadow(0 6px 13px rgba(0,0,0,.5)) drop-shadow(0 0 13px rgba(70,214,207,.28))}
/* two satin tails fall from behind the knot, notched ends */
.gff .art-gwrap .tail{position:absolute;top:58px;left:50%;width:25px;height:70px;background:linear-gradient(to right,#08272a,#2a9a93 42%,#86e4dd 51%,#1c736e 64%,#062225);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.gff .art-gwrap .tail.tl{transform-origin:top center;transform:translateX(-62%) rotate(13deg)}
.gff .art-gwrap .tail.tr{transform-origin:top center;transform:translateX(-38%) rotate(-13deg)}
/* loops: satin shading — bright outer fold easing into a deep inner crease */
.gff .art-gwrap .bl{position:absolute;width:58px;height:46px;top:28px;border-radius:62px 62px 5px 62px;background:linear-gradient(140deg,#9bece5 0%,#46d6cf 40%,#1a6f6a 80%,#0b3236 100%);box-shadow:inset 0 6px 12px rgba(0,0,0,.3),inset 0 -3px 8px rgba(255,255,255,.26)}
.gff .art-gwrap .bl.l{left:3px;transform:rotate(-29deg)}
.gff .art-gwrap .bl.r{right:3px;border-radius:62px 62px 62px 5px;transform:rotate(29deg);background:linear-gradient(-140deg,#9bece5 0%,#46d6cf 40%,#1a6f6a 80%,#0b3236 100%)}
/* centre knot: a small satin cinch, not a glossy bead */
.gff .art-gwrap .bc{position:absolute;width:25px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:7px;background:linear-gradient(135deg,#aef0ea,#46d6cf 52%,#0f4a46);box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.48),inset 0 -3px 6px rgba(0,0,0,.34)}
.gff .art-gwrap .gtag{position:absolute;top:60%;left:50%;transform:translateX(20px) rotate(-8deg);z-index:4;padding:9px 13px;border-radius:4px;background:linear-gradient(to bottom,#0a1518,#06100f);border:1px solid rgba(70,214,207,.42);box-shadow:0 6px 14px rgba(0,0,0,.45)}
.gff .art-gwrap{cursor:grab}
.gff .art-gwrap.grabbing{cursor:grabbing}
.gff .gw-hint{position:fixed;left:0;right:0;bottom:5vh;top:auto;z-index:7;text-align:center;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(175,253,244,.98);text-shadow:0 2px 16px rgba(0,0,0,.92),0 0 9px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9);pointer-events:none;transition:opacity .3s;animation:rf-hintPulse 2.2s ease-in-out infinite}

/* info to the side: artist · title · edition */
/* info: tucks onto the art's lower-LEFT edge, a tiny overlap, nudged down + rotated */
.gff .f-info{position:absolute;z-index:4;right:calc(100% - 26px);bottom:-7%;width:288px;max-width:40vw;padding:26px 24px;display:flex;flex-direction:column;gap:0;--rest:rotate(2.5deg)}
.gff .f-info .kicker{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,255,157,.9);margin-bottom:7px}   /* "YOU NOW OWN" — an ownership statement, so it reads big + mint, not a tiny label */
.gff .f-info .title{font-family:var(--serif);font-size:30px;line-height:1.1;color:#fff;margin:8px 0 4px}
.gff .f-info .artist{font-size:14px;color:rgba(243,244,242,.7)}
.gff .f-info .artist b{color:var(--mint);font-weight:600}
.gff .f-info .meta{margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;flex-direction:column;gap:11px}
.gff .f-info .mrow{display:flex;justify-content:space-between;font-size:12.5px}
.gff .f-info .mrow span:first-child{color:rgba(243,244,242,.45);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.gff .f-info .mrow span:last-child{color:#f3f4f2;font-weight:500}
.gff .f-info .chain{margin-top:16px;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:10.5px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(0,255,157,.85);background:rgba(0,255,157,.08);border:1px solid rgba(0,255,157,.24);padding:6px 11px;border-radius:99px}

/* bottom row: education flip-stack + yours/loop */
.gff .feat-row{display:grid;grid-template-columns:1fr 360px;gap:30px;width:100%;align-items:stretch}

/* education flip-stack (the how-it-works art beats, embedded + flippable) */
.gff .edu{position:relative;min-height:212px}
/* each card: a vertical layout (icon top-left → big title → big description) on a SOLID panel
   (the cards stack, so a see-through fill let the cards behind bleed through + killed legibility) */
.gff .edu-card{position:absolute;inset:0;border-radius:18px;padding:28px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;cursor:pointer;user-select:none;color:#f3f4f2;
  background:#171c26;border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 60px -22px rgba(0,0,0,.82);
  transition:transform .5s var(--ease),opacity .4s ease}
.gff .edu-card[data-i='3']{transform:translateY(30px) scale(.9) rotate(-4deg);z-index:1}
.gff .edu-card[data-i='2']{transform:translateY(20px) scale(.94) rotate(3deg);z-index:2}
.gff .edu-card[data-i='1']{transform:translateY(10px) scale(.97) rotate(-1.5deg);z-index:3}
.gff .edu-card[data-i='0']{transform:none;z-index:4}
.gff .edu-card.gone{transform:translateY(-120%) rotate(12deg) scale(1.03);opacity:0;pointer-events:none}
.gff .edu-vis{flex:none;width:64px;height:64px;display:grid;place-items:center}
.gff .edu-vis svg{width:100%;height:100%}.gff .edu-vis path{fill:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.gff .edu-vis .ln-w{stroke:#f3f4f2}.gff .edu-vis .ln-a{stroke:var(--acc,#00FF9D)}
.gff .edu-body{flex:1;width:100%;display:flex;flex-direction:column}
.gff .edu-mod{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,244,242,.5)}
.gff .edu-body h3{font-family:var(--sans);font-size:27px;font-weight:700;letter-spacing:-.01em;margin:6px 0 10px;color:#fff}
.gff .edu-body p{font-size:16.5px;line-height:1.55;color:rgba(243,244,242,.84)}
.gff .edu-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;width:100%}
.gff .edu-dots{display:flex;gap:5px}.gff .edu-dots i{width:6px;height:6px;border-radius:50%;background:#f3f4f2;opacity:.25;transition:.3s}.gff .edu-dots i.on{opacity:1;background:var(--acc,#00FF9D)}
.gff .edu-next{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--acc,#00FF9D);cursor:pointer}

/* yours / loop (value-first) */
/* actions card: lower-right, smaller, clear of the art (never touches it) */
.gff .f-yours{position:absolute;z-index:5;left:calc(100% + 30px);bottom:-2%;width:272px;max-width:40vw;padding:24px 22px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,rgba(0,255,157,.09),rgba(16,22,20,.42));border-color:rgba(0,255,157,.28)!important;text-align:center;--rest:rotate(-2deg)}
.gff .f-yours .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.gff .f-yours .big{font-family:var(--serif);font-size:27px;color:#fff;margin:6px 0 2px}
.gff .f-yours .sub{font-size:11px;color:rgba(243,244,242,.6);line-height:1.45;margin-bottom:15px}
.gff .f-yours .btn{display:block;width:100%;background:var(--mint);color:#04130c;font-weight:700;font-size:15px;border:none;border-radius:12px;padding:13px;cursor:pointer;text-decoration:none}
.gff .f-yours .ghost{display:block;width:100%;margin-top:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:var(--ink);font-weight:600;font-size:13.5px;border-radius:12px;padding:11px;cursor:pointer}
/* the onward loop — a neat centred column (lead, then each link on its own line), never wrapping mid-phrase */
.gff .f-yours .loop{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;gap:7px}
.gff .f-yours .loop-lead{font-size:13px;color:rgba(243,244,242,.6)}
.gff .f-yours .loop a{display:inline-block;color:var(--mint);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.gff .f-yours .loop a:hover{text-decoration:underline}
.gff .f-yours .free{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,255,157,.6)}
/* "Visit your collection" → the vault, centred in the open space below the piece; appears with the info */
.gff .f-collection{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);margin-top:40px;z-index:5;white-space:nowrap;opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.gff .feat-comp.show-info .f-collection{opacity:1;transform:translate(-50%,0)}
.gff .f-collection a{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,244,242,.82);background:rgba(18,21,27,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:15px 28px;text-decoration:none;transition:color .25s,border-color .25s,background .25s,transform .25s}
.gff .f-collection a:hover{color:#fff;border-color:rgba(0,255,157,.55);background:rgba(0,255,157,.1);transform:translateY(-2px)}
.gff .f-collection .arr{color:var(--mint);font-size:14px}
/* education popup — opened by "What is Digital Art?" */
.gff .edu-pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(4,6,11,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s var(--ease)}
.gff .edu-pop.in{opacity:1}
.gff .edu-pop-card{position:relative;width:min(640px,92vw);padding:40px 44px 38px;border-radius:26px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(22,26,32,.98),rgba(12,15,20,.99));box-shadow:0 50px 110px -25px rgba(0,0,0,.85);transform:scale(.95) translateY(8px);transition:transform .36s var(--ease)}
.gff .edu-pop.in .edu-pop-card{transform:scale(1) translateY(0)}
.gff .edu-pop-x{position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,23,28,.96);color:#f3f4f2;font-size:14px;cursor:pointer;display:grid;place-items:center}
.gff .edu-pop-h{font-family:var(--serif);font-style:italic;font-size:28px;color:#f4f5f2;text-align:center;margin-bottom:24px}
.gff .edu-pop .edu{min-height:366px}

/* ── FAN (multi-item fallback, unchanged feel) ── */
/* multi-item reveal: a STACK you flip through (note on top), then it SPREADS into a fan */
.gff .fan{position:relative;z-index:30;min-height:100vh;width:100%}   /* 100vh (not 125) so the cards' top:50% lands on the viewport centre under the stage's scale(.8) — was sitting ~12% low */
.gff .gf-stage .fan{opacity:0}
.gff .gf-stage.active .fan{opacity:1;transition:opacity .55s ease}
/* each card is a 3D flip: a sealed COVER that flips to its CONTENT when it fronts */
.gff .fcard{position:absolute;left:50%;top:50%;width:348px;height:540px;border-radius:22px;perspective:1600px;
  transform-origin:center center;will-change:transform;
  transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .42s ease}
.gff .flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s var(--ease)}
.gff .fcard.flipped .flip-inner{transform:rotateY(180deg)}
.gff .gf-face{position:absolute;inset:0;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(180deg,rgba(21,25,31,.97),rgba(13,16,21,.99));
  border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 80px -26px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.07)}
.gff .face-content{transform:rotateY(180deg)}
/* the sealed cover (shown until the card flips open) */
.gff .face-cover{align-items:center;justify-content:center}
.gff .face-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 78% at 50% 32%,rgba(0,255,157,.13),transparent 62%)}
.gff .cov-frame{position:absolute;inset:15px;border:1px solid rgba(0,255,157,.22);border-radius:15px;pointer-events:none}
.gff .cov-no{position:absolute;top:30px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:rgba(0,255,157,.72)}
.gff .cov-word{font-family:"Arial Black",Arial,sans-serif;font-weight:900;color:#f3f4f2;font-size:56px;letter-spacing:-.01em;
  /* raised / embossed: a top highlight ridge + a short dark extrusion + a soft cast shadow (light from above), like a struck medallion */
  text-shadow:0 -1px 0 rgba(255,255,255,.34),0 1px 0 rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.34),0 3px 1px rgba(0,0,0,.3),0 4px 9px rgba(0,0,0,.6);
  filter:drop-shadow(0 0 24px rgba(0,255,157,.18))}
.gff .cov-word i{font-style:normal}   /* the GIIIFT wordmark on the card back: brand-coloured I's (parity with the reveal-lab) */
.gff .cov-word .a{color:#FF3B6F}.gff .cov-word .b{color:#FFD93D}.gff .cov-word .c{color:#00FF9D}
.gff .cov-brand{position:absolute;bottom:30px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.36em;color:rgba(243,244,242,.5)}
/* STACK pose: a deck — front card (--d 0) on top, the rest fan down-and-back behind it */
.gff .fan.is-stack .fcard{transform:translate(-50%,-50%) translateX(var(--jx,0px)) translateY(calc(var(--jy,0px) + var(--d,0) * 5px)) rotate(var(--srot,0deg)) scale(calc(1.28 - var(--d,0) * 0.04));cursor:pointer}
/* SPREAD pose: each card slides out to its slot (--sx) with its lean */
.gff .fan.is-spread .fcard{transform:translate(-50%,-50%) translateX(var(--sx,0)) rotate(var(--lean,0deg));opacity:1!important;cursor:grab}
.gff .fan.is-spread .fcard:hover{transform:translate(-50%,-50%) translateX(var(--sx,0)) translateY(-20px) rotate(var(--lean,0deg)) scale(1.04);z-index:60!important}
.gff .fan-nav{position:absolute;left:50%;bottom:2.4vh;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:15px;transition:opacity .4s ease}
.gff .fan.is-spread .fan-nav{opacity:0;pointer-events:none}
.gff .fan-dots{display:flex;gap:8px}
.gff .fan-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s}
.gff .fan-dots i.on{background:var(--mint);transform:scale(1.35)}
.gff .fan-next{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#04130c;background:var(--mint);border:none;border-radius:999px;padding:16px 48px;cursor:pointer;font-weight:700;box-shadow:0 12px 32px -8px rgba(0,255,157,.5)}
.gff .fan-hint{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,244,242,.38)}
.gff .fcard .card-h{display:flex;justify-content:space-between;padding:22px 22px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,244,242,.5)}
.gff .fcard .body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.gff .fcard .art{flex:1;margin:14px;border-radius:14px;position:relative;border:1px solid rgba(255,255,255,.08)}
.gff .fcard .disc{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:46px;color:#fff;box-shadow:0 22px 50px -10px var(--cl,#888),inset 0 -8px 16px rgba(0,0,0,.35),inset 0 8px 14px rgba(255,255,255,.4)}
.gff .fcard .amt{font-family:var(--serif);font-size:30px;margin-top:24px;color:#f4f5f2}.gff .fcard .nm{font-size:12px;color:rgba(243,244,242,.55);margin-top:6px}
/* the final recap card — composition-aware (money / collectibles / mixed) */
.gff .rc-body{justify-content:center;padding:26px 24px}
.gff .rc-from{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,255,157,.72);margin-bottom:10px}
.gff .rc-hero{font-family:var(--serif);font-size:29px;line-height:1.12;color:#fff;margin-bottom:14px;max-width:280px}
.gff .rc-hero.rc-num{font-size:60px;line-height:1;margin-bottom:16px}
.gff .rc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:15px}
.gff .rc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(243,244,242,.85);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:5px 12px}
.gff .rc-chip i{font-style:normal;font-size:13px;line-height:1}
.gff .rc-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 12px;margin-bottom:19px}
.gff .rc-trust span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,244,242,.5)}
.gff .rc-trust span::before{content:"✓ ";color:var(--mint)}
.gff .rc-acts{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;margin-bottom:15px}
.gff .rc-btn{display:block;width:100%;background:var(--mint);color:#04130c;font-weight:700;font-size:14.5px;border-radius:13px;padding:14px;text-decoration:none;box-shadow:0 12px 30px -10px rgba(0,255,157,.5);transition:filter .2s}
.gff .rc-btn:hover{filter:brightness(1.07)}
.gff .rc-2nd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,244,242,.7);text-decoration:none}
.gff .rc-2nd:hover{color:var(--mint)}
.gff .rc-loop{font-size:12px;color:rgba(243,244,242,.6);line-height:1.5}
.gff .rc-loop a{color:var(--mint);text-decoration:none;font-weight:600}
.gff .rc-dot{margin:0 6px;opacity:.5}
/* a sealed foil booster pack (fan card for kind:"pack") */
.gff .rf-pack{position:relative;width:62%;max-width:188px;aspect-ratio:.62;margin:0 auto 18px;border-radius:11px;overflow:hidden;box-shadow:0 26px 56px -16px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.16)}
.gff .rf-pack-foil{position:absolute;inset:0;background-size:cover!important;background-position:center!important;filter:saturate(1.18) brightness(1.04)}
.gff .rf-pack-crimp{position:absolute;left:0;right:0;height:13px;background-color:rgba(255,255,255,.16);background-image:linear-gradient(45deg,transparent 33%,rgba(0,0,0,.34) 0 67%,transparent 0),linear-gradient(-45deg,transparent 33%,rgba(0,0,0,.34) 0 67%,transparent 0);background-size:10px 13px}
.gff .rf-pack-crimp.top{top:0}.gff .rf-pack-crimp.bot{bottom:0}
.gff .rf-pack-sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.12) 53%,transparent 64%);mix-blend-mode:screen;pointer-events:none}
.gff .rf-pack-mark{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-size:25px;letter-spacing:-.02em;color:rgba(255,255,255,.95);text-shadow:0 2px 12px rgba(0,0,0,.55)}
.gff .rf-pack-mark i{font-style:normal}.gff .rf-pack-mark .a{color:#FF3B6F}.gff .rf-pack-mark .b{color:#FFD93D}.gff .rf-pack-mark .c{color:#00FF9D}
.gff .rf-pack-name{font-family:var(--serif);font-size:20px;color:#fff;text-align:center;margin-top:2px}
.gff .rf-pack-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:rgba(243,244,242,.6);text-align:center;margin-top:5px;text-transform:uppercase}
/* a pack is its OWN card in the stack — the bare foil pouch (no GIIIFT chrome), sitting centred behind
   the others like any stacked card; you reach it in the flip-through and rip it open IN PLACE. */
.gff .fcard.is-pack{cursor:pointer;outline:none}
.gff .fcard.is-pack .fp-pouch{position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;margin:0;box-shadow:0 30px 60px -16px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.18)}
.gff .fcard.is-pack:hover .fp-pouch,.gff .fcard.is-pack:focus-visible .fp-pouch{filter:brightness(1.07)}
.gff .fp-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#04130c;background:var(--mint);border-radius:999px;padding:8px 18px;font-weight:700;box-shadow:0 8px 22px -6px rgba(0,255,157,.65);animation:rf-fpPulse 2.1s ease-in-out infinite;pointer-events:none;z-index:3}
@keyframes rf-fpPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
.gff .fp-burst{position:absolute;left:50%;top:48%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,#fff,rgba(0,255,157,.7) 38%,transparent 70%);opacity:0;pointer-events:none;z-index:4}
.gff .fp-pull{position:absolute;left:50%;top:50%;width:72%;height:82%;transform:translate(-50%,-50%) translateY(14px) scale(.55);border-radius:14px;opacity:0;background:conic-gradient(from 0deg at 50% 50%,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b5de5,#ff6b6b);box-shadow:0 22px 56px -10px rgba(0,255,157,.6),inset 0 0 0 1px rgba(255,255,255,.34);display:grid;place-items:center;pointer-events:none;z-index:2}
.gff .fp-pull-mark{font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-size:22px;color:rgba(255,255,255,.96);text-shadow:0 1px 9px rgba(0,0,0,.5)}
.gff .fp-pull-mark i{font-style:normal}.gff .fp-pull-mark .a{color:#FF3B6F}.gff .fp-pull-mark .b{color:#FFD93D}.gff .fp-pull-mark .c{color:#00FF9D}
.gff .fp-done{display:none;position:absolute;left:0;right:0;bottom:22px;flex-direction:column;align-items:center;gap:7px;text-align:center;z-index:3}
.gff .fp-done-t{font-family:var(--serif);font-size:15px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.gff .fp-cta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);text-decoration:none}
/* rip in place (the pack is already the front card): pouch tears away → the pull rises → CTA shows */
.gff .fcard.is-pack.opening .fp-hint,.gff .fcard.is-pack.opened .fp-hint{opacity:0;transition:opacity .2s}
.gff .fcard.is-pack.opening .fp-pouch{animation:rf-fpShake .5s ease}
.gff .fcard.is-pack.opening .fp-burst{animation:rf-fpBurst .72s ease-out forwards}
@keyframes rf-fpShake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-2deg)}40%{transform:translateX(4px) rotate(2deg)}60%{transform:translateX(-3px) rotate(-1deg)}80%{transform:translateX(3px) rotate(1deg)}}
@keyframes rf-fpBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(40)}}
.gff .fcard.is-pack.opened .fp-pouch{opacity:0;transition:opacity .55s ease;pointer-events:none;animation:none}
.gff .fcard.is-pack.opened .fp-pull{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s}
.gff .fcard.is-pack.opened .fp-done{display:flex;animation:rf-rcIn .5s ease both .4s}
@media (prefers-reduced-motion: reduce){
  .gff .fp-hint{animation:none!important}
  .gff .fcard.is-pack.opening .fp-pouch,.gff .fcard.is-pack.opening .fp-burst{animation:none}
  .gff .fcard.is-pack.opened .fp-pouch,.gff .fcard.is-pack.opened .fp-pull{transition:none}
}
/* the voice note — a play pill on the note card (offered, never autoplayed) */
.gff .rf-voice{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:10px 17px 10px 13px;border-radius:999px;border:1px solid rgba(0,255,157,.42);background:rgba(0,255,157,.09);color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:11px;transition:background .2s}
.gff .rf-voice:hover{background:rgba(0,255,157,.15)}
.gff .rf-voice-ic{width:0;height:0;border-style:solid;border-width:6px 0 6px 11px;border-color:transparent transparent transparent var(--mint)}
.gff .rf-voice.playing .rf-voice-ic{width:10px;height:11px;border:none;background:var(--mint);border-radius:1px;animation:rf-vpulse 1s ease-in-out infinite}
@keyframes rf-vpulse{0%,100%{opacity:1}50%{opacity:.45}}
.gff .rf-voice-t{text-transform:uppercase;letter-spacing:.1em}
.gff .rf-voice-s{color:rgba(243,244,242,.5)}
/* trust chips + send-back on the featured ending (parity with the fan recap) */
.gff .f-trust{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:max-content;max-width:100%;margin:4px auto 16px}   /* a neat left-aligned checklist, centred as a block */
.gff .f-trust span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,244,242,.62)}
.gff .f-trust span::before{content:"✓ ";color:var(--mint);font-weight:700}
.gff .loop-dot{margin:0 5px;opacity:.5}
/* recap entrance: once the card flips open, the breakdown settles in with a gentle stagger.
   TRANSFORM-ONLY (no opacity) so resting visibility is NEVER gated on the animation — a paused
   animation (hidden tab) leaves the elements visible, just briefly offset. (See PR #288.) */
@keyframes rf-rcIn{from{transform:translateY(14px)}to{transform:none}}
.gff .fcard[data-rev="yours"].flipped .rc-chips,
.gff .fcard[data-rev="yours"].flipped .rc-trust,
.gff .fcard[data-rev="yours"].flipped .rc-acts,
.gff .fcard[data-rev="yours"].flipped .rc-loop{animation:rf-rcIn .5s cubic-bezier(.2,.7,.2,1) both}
.gff .fcard[data-rev="yours"].flipped .rc-chips{animation-delay:.5s}
.gff .fcard[data-rev="yours"].flipped .rc-trust{animation-delay:.58s}
.gff .fcard[data-rev="yours"].flipped .rc-acts{animation-delay:.66s}
.gff .fcard[data-rev="yours"].flipped .rc-loop{animation-delay:.74s}
@media (prefers-reduced-motion: reduce){
  .gff .fcard[data-rev="yours"].flipped .rc-chips,
  .gff .fcard[data-rev="yours"].flipped .rc-trust,
  .gff .fcard[data-rev="yours"].flipped .rc-acts,
  .gff .fcard[data-rev="yours"].flipped .rc-loop{animation:none}
}
/* the note — large, written by hand */
.gff .note-msg{font-family:'Caveat',var(--serif);font-weight:600;font-size:40px;line-height:1.18;color:#f6f7f4;padding:0 8px;text-wrap:balance;max-width:18ch;margin:0 auto}
.gff .note-msg .hw-word{display:inline-block}
.gff .note-msg .hw-ch{display:inline-block;opacity:0;animation:rf-hwIn .52s ease forwards}
.gff .note-msg.hold .hw-ch{animation-play-state:paused}   /* laid out + invisible until the reveal cue */
@keyframes rf-hwIn{from{opacity:0;filter:blur(7px);transform:translateY(7px) scale(.86)}to{opacity:1;filter:none;transform:none}}
/* note card filled top-to-bottom: kicker (top) · handwritten message (centre) · signature (bottom) · footer mark */
.gff .note-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,255,157,.85)}
.gff .note-eyebrow::before,.gff .note-eyebrow::after{content:'';width:24px;height:1px;background:rgba(0,255,157,.4)}
.gff .note-sig{font-family:'Caveat',var(--serif);font-weight:600;font-size:38px;color:rgba(246,247,244,.62)}
.gff .note-foot{display:flex;flex-direction:column;align-items:center;gap:13px;padding:0 32px 30px}
.gff .note-foot .nf-rule{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.13),transparent)}
.gff .note-foot .nf-wm{font-family:var(--mono);font-size:11px;letter-spacing:.42em;color:rgba(243,244,242,.4)}
/* a sent photo as its own card */
.gff .photo-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:22px}
.gff .photo-fill{width:100%;height:100%;border-radius:14px;box-shadow:0 18px 44px -16px rgba(0,0,0,.62);background-size:cover;background-position:center}

@media (max-width:900px){
  .gff .feat-band{display:block;min-height:0;padding:64px 0}
  .gff .art-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
  .gff .f-note,.gff .f-info,.gff .f-yours,.gff .f-collection{position:static;left:auto;right:auto;top:auto;bottom:auto;margin:0;--rest:none!important;width:100%;max-width:420px}
  .gff .f-note{order:0}.gff .f-art{order:1}.gff .f-info{order:2}.gff .f-yours{order:3}.gff .f-collection{order:4;transform:none!important;text-align:center}
  .gff .feat-comp.show-info .f-collection{transform:none!important}
  .gff .f-art{height:auto;width:100%;max-width:min(86vw,420px);max-height:56vh}
  .gff .feat-row{grid-template-columns:1fr;gap:18px}
  .gff .feat{padding:64px 20px 48px}
  .gff .fcard{width:68vw;max-width:300px;height:60vh}
  .gff .intro h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){ .gff .reveal-el{animation:none!important;opacity:1!important;transform:var(--rest,none)!important} .gff .edu-card{transition:none} }

/* ── COLLECTOR REVEAL (screen 2 of the digital-art reveal) — the collection/artist grid,
      received piece centered, surroundings blur+dim, the piece spotlit + text below. ── */
/* ── GALLERY WALL: a SET of artworks (≥2) → a framed wall the recipient walks; tap any to spotlight ── */
.gff .gw{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:1180px;margin:0 auto;padding:64px 28px 84px;min-height:100vh;justify-content:center}
.gff .gw-head{text-align:center;max-width:600px}
.gff .gw-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,255,157,.72);margin-bottom:12px}
.gff .gw-note{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.34;color:#fff}
.gff .gw-count{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,244,242,.5)}
.gff .gw-wall{display:grid;gap:30px 28px;width:100%;justify-content:center;align-items:center;grid-template-columns:repeat(auto-fit,minmax(210px,250px))}
.gff .gw-piece{margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:13px;outline:none}
.gff .gw-frame{position:relative;display:flex;flex-direction:column;align-items:center;padding:13px;border-radius:6px;width:100%;
  background:linear-gradient(135deg,#262931 0%,#15171d 46%,#090b0f 100%);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.82),0 12px 28px rgba(0,0,0,.46),inset 0 2px 2px rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.7),inset 0 0 0 1px #05070a;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gff .gw-frame::before{content:'';position:absolute;left:9px;right:9px;top:9px;bottom:9px;border-radius:2px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(0,255,157,.2),inset 0 0 0 3px rgba(0,0,0,.5),inset 0 0 14px rgba(0,255,157,.06)}
.gff .gw-mat{position:relative;width:100%;padding:13px;border-radius:1px;background:linear-gradient(160deg,#1e2128,#14161b);
  box-shadow:inset 0 8px 18px rgba(0,0,0,.6),inset 0 2px 5px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.05)}
.gff .gw-canvas{position:relative;width:100%;aspect-ratio:var(--ar,1);max-height:300px;border-radius:1px;
  background:var(--art,#222);background-size:cover;background-position:center;
  box-shadow:0 3px 12px rgba(0,0,0,.66),inset 0 0 22px rgba(0,0,0,.4)}
.gff .gw-canvas::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(48deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 48%,rgba(0,0,0,.22) 100%)}
.gff .gw-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:1px}
.gff .gw-piece:hover .gw-frame,.gff .gw-piece:focus-visible .gw-frame{transform:translateY(-6px);box-shadow:0 50px 96px -28px rgba(0,0,0,.9),0 0 0 1px rgba(0,255,157,.3),0 14px 30px rgba(0,0,0,.5)}
.gff .gw-cap{text-align:center;display:flex;flex-direction:column;gap:3px}
.gff .gw-t{font-family:var(--serif);font-size:17px;color:#f3f4f2}
.gff .gw-a{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,244,242,.55)}
/* the recap footer = recapCard in an in-flow panel (overriding the absolute, fixed-size fan .fcard) */
.gff .gw-recap.fcard{position:relative;left:auto;top:auto;width:min(360px,92vw);height:auto;perspective:none;will-change:auto;margin:0 auto;transform:none!important;
  border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(21,25,31,.97),rgba(13,16,21,.99));border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 80px -26px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.07)}
/* the spotlight overlay (tap a piece → big framed view + its plate) */
.gff .gw-spot{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:40px 22px;background:rgba(5,6,8,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .42s var(--ease)}
.gff .gw-spot.in{opacity:1;pointer-events:auto}
.gff .gw-spot-x{position:absolute;top:20px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--ink);font-size:16px;cursor:pointer;transition:background .2s;z-index:2}
.gff .gw-spot-x:hover{background:rgba(255,255,255,.14)}
.gff .gw-spot-inner{display:flex;align-items:center;gap:46px;max-width:980px;width:100%;justify-content:center;transform:translateY(16px) scale(.97);transition:transform .5s var(--ease)}
.gff .gw-spot.in .gw-spot-inner{transform:none}
.gff .gw-spot-art{flex:0 0 auto;width:min(46vw,440px)}   /* a definite width so the .gw-frame → .gw-canvas width:100% chain resolves (no grid track here) */
.gff .gw-spot-art .gw-canvas{max-height:min(64vh,540px)}
.gff .gw-spot-info{flex:0 0 260px;max-width:300px}
.gff .gw-spot-kicker{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,255,157,.9);margin-bottom:6px}
.gff .gw-spot-title{font-family:var(--serif);font-size:31px;line-height:1.1;color:#fff;margin:6px 0 4px}
.gff .gw-spot-artist{font-size:14px;color:rgba(243,244,242,.7)}.gff .gw-spot-artist b{color:var(--mint);font-weight:600}
.gff .gw-spot-meta{margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;flex-direction:column;gap:11px}
.gff .gw-spot-meta .mrow{display:flex;justify-content:space-between;font-size:12.5px}
.gff .gw-spot-meta .mrow span:first-child{color:rgba(243,244,242,.45);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.gff .gw-spot-meta .mrow span:last-child{color:#f3f4f2;font-weight:500}
.gff .gw-spot-chain{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(0,255,157,.85);background:rgba(0,255,157,.08);border:1px solid rgba(0,255,157,.24);padding:6px 11px;border-radius:99px}
.gff .gw-spot-coll{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mint);text-decoration:none;cursor:pointer}
.gff .gw-spot-coll:hover{text-decoration:underline}

/* ── the BOX STACK: openable 3D box-engine boxes (one per piece); each opens (spin → bloom) to a framed piece ── */
.gff .gw-bx{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gff .gw-bx-stack{position:relative;width:min(300px,74vw);height:min(380px,56vh);display:grid;place-items:center}
.gff .gw-bx-slot{position:absolute;left:50%;top:50%;width:min(230px,52vmin);transform:translate(-50%,-50%) translateY(calc(var(--d,0)*14px)) scale(calc(1 - var(--d,0)*0.06));z-index:calc(40 - var(--d,0));transition:transform .6s var(--ease),opacity .55s var(--ease)}
.gff .gw-bx-slot.is-front{cursor:pointer}
.gff .gw-bx-slot.is-gone{opacity:0;transform:translate(-50%,-50%) translateY(-66px) scale(.85);pointer-events:none}
.gff .gw-bx-box{position:relative;display:grid;place-items:center;perspective:1200px}   /* the per-box 3D viewport; JS spins/shrinks the engine's .gbx-box on open */
/* the framed piece — hidden inside the box until it opens, then rises out + scales up */
.gff .gw-bx-art{position:absolute;left:50%;top:50%;width:min(270px,62vw);transform:translate(-50%,-42%) scale(.55);opacity:0;pointer-events:none;z-index:5;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.gff .gw-bx-slot.opened .gw-bx-art{transform:translate(-50%,-54%) scale(1);opacity:1}
.gff .gw-bx-cap{margin-top:14px;text-align:center}
.gff .gw-bt{display:block;font-family:var(--serif);font-size:20px;color:#fff}
.gff .gw-ba{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,244,242,.6);margin-top:4px}
.gff .gw-bx-hint{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,255,157,.8);opacity:0;transition:opacity .4s;animation:rf-hintPulse 2.2s ease-in-out infinite;pointer-events:none}
.gff .gw-bx-slot.is-front .gw-bx-hint{opacity:1}
.gff .gw-bx-slot.opened .gw-bx-hint{opacity:0!important;animation:none}
/* the bloom behind the box as it opens */
.gff .gw-bx-bloom{position:absolute;top:46%;left:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,#fff,rgba(0,255,157,.7) 38%,transparent 70%);opacity:0;pointer-events:none;z-index:2;mix-blend-mode:screen}
.gff .gw-bx-bloom.burst{animation:rf-bxBloom .9s ease-out forwards}
@keyframes rf-bxBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}26%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(46)}}
@media (max-width:735px){ .gff .gw-bx-stack{height:min(340px,46vh)} .gff .gw-bt{font-size:18px} }
@media (prefers-reduced-motion:reduce){ .gff .gw-bx-slot,.gff .gw-bx-art{transition:none} .gff .gw-bx-hint{animation:none} }

/* ── the unboxing CEREMONY (a stack of gift boxes) → the wall is the finale ── */
/* the wall / header / recap are hidden until the ceremony completes; gated by .gw.revealed via TRANSITIONS
   (not animations) → the resting state IS visible, so a paused/headless transition still lands visible (no PR#288 trap) */
.gff .gw-head,.gff .gw-foot{opacity:0;transition:opacity .8s var(--ease)}
.gff .gw .gw-piece{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i,0) * .08s)}
.gff .gw.revealed .gw-head,.gff .gw.revealed .gw-foot{opacity:1}
.gff .gw.revealed .gw-piece{opacity:1;transform:none}
.gff .gw-ceremony{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
/* RELIABLE visibility gate: keyed off .gf-stage.active (set synchronously in reveal(), like the wall/fan/featured)
   — NOT a rAF class toggle, which could be missed in the real box-open flow and leave the ceremony invisible. */
.gff .gf-stage.active .gw-ceremony{opacity:1;pointer-events:auto}
.gff .gw-ceremony.done{opacity:0!important;pointer-events:none}   /* fade out at finish (wins over .active) */
.gff .gw-cer-sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,255,157,.72)}
.gff .gw-box-stack{position:relative;width:min(300px,78vw);height:min(380px,54vh);display:grid;place-items:center}
.gff .gw-box{position:absolute;width:min(220px,60vw);aspect-ratio:1.04;transform-origin:center bottom;cursor:grab;outline:none;
  transform:translateY(calc(var(--d,0) * 13px)) scale(calc(1 - var(--d,0) * 0.055));z-index:calc(40 - var(--d,0));
  transition:transform .6s var(--ease),opacity .55s var(--ease)}
.gff .gw-box.is-gone{opacity:0;transform:translateY(-52px) scale(.9);pointer-events:none}
.gff .gw-box-body{position:absolute;left:0;right:0;bottom:0;height:60%;border-radius:8px 8px 12px 12px;
  background:linear-gradient(162deg,#262a33,#15171d 68%,#0b0d11);
  box-shadow:0 32px 64px -18px rgba(0,0,0,.74),inset 0 2px 2px rgba(255,255,255,.08),inset 0 -7px 16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}
.gff .gw-box-body::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
.gff .gw-box-lid{position:absolute;left:-5%;right:-5%;top:28%;height:22%;border-radius:8px;z-index:3;cursor:grab;
  background:linear-gradient(162deg,#2d313b,#191c22);
  box-shadow:0 14px 28px -8px rgba(0,0,0,.66),inset 0 2px 2px rgba(255,255,255,.1),inset 0 -5px 11px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .55s ease}
.gff .gw-rib{position:absolute;background:var(--rib,#00FF9D);opacity:.92;box-shadow:0 0 15px color-mix(in srgb,var(--rib,#00FF9D) 50%,transparent)}
.gff .gw-rib-h{left:0;right:0;top:50%;height:12px;transform:translateY(-50%)}
.gff .gw-rib-v{top:-44%;bottom:-44%;left:50%;width:12px;transform:translateX(-50%)}
.gff .gw-bow{position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:50%;z-index:2;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.55),var(--rib,#00FF9D) 72%);box-shadow:0 0 18px color-mix(in srgb,var(--rib,#00FF9D) 60%,transparent)}
.gff .gw-box-hint{position:absolute;left:0;right:0;bottom:-32px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,255,157,.82);opacity:0;transition:opacity .4s;animation:rf-hintPulse 2.2s ease-in-out infinite}
.gff .gw-box.is-front .gw-box-hint{opacity:1}
/* the framed piece — hidden inside the box until the lid is pulled, then rises out above it + scales up */
.gff .gw-box-reveal{position:absolute;left:50%;bottom:32%;width:86%;transform:translate(-50%,12%) scale(.5);opacity:0;z-index:1;pointer-events:none;
  transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.gff .gw-box-cap{margin-top:12px;text-align:center}
.gff .gw-bt{display:block;font-family:var(--serif);font-size:19px;color:#fff}
.gff .gw-ba{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,244,242,.6);margin-top:3px}
.gff .gw-box.opened{cursor:default}
.gff .gw-box.opened .gw-box-lid{transform:translateY(-150px) rotate(-12deg);opacity:0;pointer-events:none}
.gff .gw-box.opened .gw-box-hint{opacity:0}
.gff .gw-box.opened .gw-box-reveal{transform:translate(-50%,-74%) scale(1);opacity:1;z-index:5}
.gff .gw-cer-nav{display:flex;flex-direction:column;align-items:center;gap:14px}
.gff .gw-cer-dots{display:flex;gap:8px}
.gff .gw-cer-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s}
.gff .gw-cer-dots i.on{background:var(--mint);transform:scale(1.3)}
.gff .gw-cer-next{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#04130c;background:var(--mint);border:none;border-radius:999px;padding:14px 40px;cursor:pointer;font-weight:700;box-shadow:0 12px 32px -8px rgba(0,255,157,.5);opacity:.42;transition:opacity .3s,filter .2s}
.gff .gw-cer-next.ready{opacity:1}
.gff .gw-cer-next:hover{filter:brightness(1.07)}
@media (max-width:735px){
  .gff .gw{padding:48px 18px 70px;gap:26px}
  .gff .gw-note{font-size:21px}
  .gff .gw-wall{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px 16px}
  .gff .gw-t{font-size:15px}
  .gff .gw-spot-inner{flex-direction:column;gap:22px}
  .gff .gw-spot-art{max-width:80vw}.gff .gw-spot-art .gw-canvas{max-height:44vh}
  .gff .gw-spot-info{flex:none;max-width:80vw;text-align:center}
  .gff .gw-spot-meta{align-items:stretch}
  .gff .gw-box-stack{height:min(330px,44vh)}
  .gff .gw-cer-sub{font-size:10px}
  .gff .gw-bt{font-size:17px}
  .gff .gw-ceremony{gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .gff .gw-frame,.gff .gw-spot,.gff .gw-spot-inner{transition:none}
  .gff .gw-head,.gff .gw-foot,.gff .gw .gw-piece,.gff .gw-ceremony,.gff .gw-box,.gff .gw-box-lid,.gff .gw-box-reveal{transition:none}
  .gff .gw-box-hint{animation:none}
}

.gff .collector{position:fixed;inset:0;z-index:45;opacity:0;pointer-events:none;transition:opacity .9s var(--ease);background:transparent}
.gff .collector.active{opacity:1;pointer-events:auto}
/* the gallery — blurred backdrop in phase 1 (hero spotlight), sharp + scrollable in phase 2 (browse) */
.gff .col-grid{position:absolute;inset:0;overflow:hidden;display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:18px;padding:8vh 7vw 20vh;align-content:safe center;
  opacity:0;transform:scale(1.05);filter:blur(9px) brightness(.4) saturate(.72);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease),filter .9s var(--ease)}
.gff .collector.in .col-grid{opacity:1;transform:scale(1)}
.gff .collector.browse .col-grid{opacity:1;transform:none;filter:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gff .col-cell{position:relative;height:0;padding-bottom:142%;border-radius:11px;overflow:hidden;background:#0d1013;border:1px solid rgba(255,255,255,.07);transition:transform .35s var(--ease),box-shadow .35s ease}   /* padding-bottom = reliable aspect in a grid (aspect-ratio mis-sizes the rows → cells overlap) */
.gff .col-cell .fill{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center}
.gff .col-cell .cell-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gff .collector.browse .col-cell:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 20px 44px -14px rgba(0,0,0,.72),0 0 0 1px rgba(0,255,157,.35)}
.gff .col-cell.is-yours{border-color:rgba(0,255,157,.55)}   /* the piece you collected, in its place in the collection */
.gff .collector.browse .col-cell.is-yours{box-shadow:0 0 0 1px rgba(0,255,157,.6),0 0 46px rgba(0,255,157,.32)}
.gff .col-cell.is-yours::after{content:'YOURS';position:absolute;top:8px;left:8px;z-index:3;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:#04130c;background:var(--mint);padding:3px 7px;border-radius:6px;opacity:0;transition:opacity .5s ease .3s}
.gff .collector.browse .col-cell.is-yours::after{opacity:1}
/* each piece carries its own number (bottom-right) — fades in with the gallery */
.gff .col-cell .cnum{position:absolute;right:7px;bottom:7px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.92);background:rgba(8,11,10,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:3px 7px;border-radius:6px;opacity:0;transition:opacity .5s ease .25s}
.gff .collector.browse .col-cell .cnum{opacity:1}
.gff .col-cell.is-yours .cnum{color:#04130c;background:var(--mint)}
/* the spotlighted received piece — BIG, no container; fades as the gallery takes over */
.gff .col-hero{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:6;opacity:0;pointer-events:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.gff .collector.in .col-hero{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gff .collector.browse .col-hero{opacity:0;transform:translate(-50%,-50%) scale(1.08)}
.gff .col-hero .h-art{position:relative;height:min(62vh,580px);aspect-ratio:var(--hero-ar,.68);background:var(--hero-bg,#0c0e13) center/contain no-repeat;filter:drop-shadow(0 44px 80px rgba(0,0,0,.62))}
.gff .col-hero .h-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* back to the gift page — fades in with the collector */
/* the back button sits in a centered row beside the "piece X of Y" pill (col-foot), not pinned top-left */
.gff .col-back{display:inline-flex;align-items:center;pointer-events:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,244,242,.82);background:rgba(10,14,12,.5);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 16px;border-radius:99px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.gff .col-back:hover{background:rgba(70,214,207,.16);border-color:rgba(70,214,207,.5);color:#eafffe;transform:translateY(-2px)}
.gff .col-ambient{position:absolute;top:43%;left:50%;width:860px;height:860px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.4s ease;background:radial-gradient(circle,rgba(0,255,157,.16),transparent 66%)}
.gff .col-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background:radial-gradient(circle at 50% 43%,transparent 24%,rgba(5,8,11,.94) 100%)}
.gff .col-bottom{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:linear-gradient(to top,var(--void),rgba(5,8,11,.82) 42%,transparent)}
.gff .collector.in .col-ambient,.gff .collector.in .col-vignette,.gff .collector.in .col-bottom{opacity:1}
.gff .collector.browse .col-ambient,.gff .collector.browse .col-vignette{opacity:0}
.gff .col-text{position:absolute;left:50%;bottom:6vh;transform:translate(-50%,28px);width:100%;padding:0 24px;text-align:center;z-index:7;opacity:0;pointer-events:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.gff .collector.in .col-text{opacity:1;transform:translate(-50%,0);transition-delay:.4s}
.gff .col-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(0,255,157,.85);margin-bottom:16px}
.gff .col-eyebrow::before,.gff .col-eyebrow::after{content:'';width:28px;height:1px;background:rgba(0,255,157,.4)}
.gff .col-text h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,54px);line-height:1.12;color:#f4f5f2;text-shadow:0 4px 24px rgba(0,0,0,.8)}
.gff .col-text h1 i{font-style:italic;font-weight:500;color:#fff}
.gff .col-pill{margin-top:22px;display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:99px;background:rgba(10,14,12,.5);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;color:rgba(243,244,242,.7)}
.gff .col-pill .dot{position:relative;width:7px;height:7px}
.gff .col-pill .dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--mint);opacity:.7;animation:rf-colping 1.6s ease infinite}
.gff .col-pill .dot::after{content:'';position:absolute;inset:1.5px;border-radius:50%;background:var(--mint)}
@keyframes rf-colping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.4);opacity:0}}
.gff .col-pill b{font-family:var(--mono);color:#fff;letter-spacing:.1em;font-weight:500}
.gff .col-pill .of{color:rgba(243,244,242,.4)}
/* bottom row: the "piece X of Y" pill + the back button, centred together */
.gff .col-foot{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.gff .col-foot .col-pill{margin-top:0}
@media (max-width:760px){ .gff .col-grid{padding:7vh 5vw 18vh;gap:12px} }   /* column count is JS-driven (odd, so your piece has a true middle) */
@media (prefers-reduced-motion:reduce){.gff .col-grid,.gff .col-cell,.gff .col-text,.gff .col-ambient,.gff .col-vignette,.gff .col-bottom{transition:none!important}}
/* box-open crescendo: a soft bloom centred BEHIND the box (z-index:-1 inside the stage); it blooms as the box vanishes into it */
.gff .box-flash{position:absolute;top:50%;left:50%;width:600px;height:600px;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;mix-blend-mode:screen;transform:translate(-50%,-50%) scale(.45);filter:blur(3px);
  background:radial-gradient(circle,rgba(255,255,255,.92) 0%,rgba(198,255,232,.82) 14%,var(--mint) 32%,rgba(0,255,157,.3) 52%,transparent 72%)}
.gff .box-flash::before{content:'';position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(0,255,157,.22),transparent 62%);filter:blur(14px)}
.gff .box-flash.burst{animation:rf-flashBurst 1.1s ease-out forwards}
@keyframes rf-flashBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}24%{opacity:.85;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}