/* Home hero adapted from poc/cards.css:original pack artwork and one CSS offer card.
   Opening effects:unpack-opening.css. */
/* Homepage-only palette from the operator CSS; shared routes retain site.css tokens. */
:root{--bg:oklch(15.68% .0183 231.24);--panel:oklch(18.87% .0238 238.91);--paper:oklch(98.5% 0 0);--muted:oklch(76.1% .0054 228.84);--accent:#69d0ff;--accent-rgb:105,208,255;--edge:rgba(105,208,255,.22);--cta:radial-gradient(151.98% 165.63% at 48.09% 47.12%,#029ee6 0%,#b5e8ff 100%)}
.ambient{background:radial-gradient(ellipse at 74% 30%,#029ee629,transparent 55%),radial-gradient(ellipse at 10% 90%,#69d0ff0f,transparent 50%)}
/* Six pixels outside unchanged content bounds fit the 2px ring + 4px offset.
   Sideways clipping still contains flying foil inside the page gutters. */
.experience {display:grid;grid-template-columns:42% 58%;min-height:600px;padding:8px 6px 28px;margin:0 -6px;align-items:center;overflow-x:clip;}
.intro {position:relative;z-index:5;padding-bottom:20px;}
.intro h1 {font-size:clamp(44px,5vw,76px);font-weight:500;letter-spacing:-3px;line-height:1.02;margin:24px 0 20px;}
.intro h1 em {font-family:var(--serif);font-weight:400;color:var(--accent);}
.intro .lead {font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 30px;max-width:460px;}
.actions {display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-height:56px;}
.primary {
  background:var(--cta);color:#0c1a24;width:100%;max-width:435px;border-radius:8px;min-height:56px;
  padding:15px 20px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;
  transition:transform .2s,opacity .2s;
}
.primary:hover:not(:disabled) {transform:translateY(-2px);filter:brightness(1.06);}
.primary:disabled {opacity:.62;cursor:wait;}
.action-arrow {font-size:22px;font-weight:400;line-height:1;}
/* Reserve two hint lines in the narrow desktop layout. */
.interaction-help {font-size:13px;line-height:1.6;color:var(--muted);margin:11px 0 0;min-height:3.2em;}
.intro-note {margin-top:30px;max-width:435px;color:var(--muted);font-size:12px;display:flex;gap:12px;align-items:center;}
.intro-note span:first-child {font:28px var(--serif);color:var(--paper);line-height:1;}

/* Stage */
.showcase {--card-w:177px;--focus-scale:1.42;position:relative;min-width:0;align-self:stretch;perspective:1600px;isolation:isolate;}
/* Focus parking after submit: the stage itself is not an interactive control. */
.showcase:focus {outline:none;}
.stage-kicker {display:flex;justify-content:space-between;padding:4px 6% 0 13%;font-size:11px;letter-spacing:2px;color:var(--muted);}
.stage-kicker span:last-child {color:var(--accent);}
.stage {position:relative;height:496px;perspective:1300px;}
/* Soft edges instead of a hard clip while the pack opens:flying foil fades out before the border of the stage. */
.showcase[data-opening] .stage {
  --edge:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:var(--edge);-webkit-mask-composite:source-in;mask-image:var(--edge);mask-composite:intersect;
}
.halo {position:absolute;width:90%;height:90%;left:6%;top:3%;opacity:.75;filter:blur(22px);background:radial-gradient(ellipse,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.02) 49%,transparent 70%);}
.orbit {position:absolute;width:87%;height:76%;left:8%;top:13%;border:1px solid rgba(var(--accent-rgb),.08);border-radius:50%;transform:rotate(-27deg);}
.orbit-two {width:66%;height:83%;left:18%;top:9%;transform:rotate(34deg);border-style:dashed;}
.stage-spark {position:absolute;color:var(--accent);font:36px var(--serif);opacity:.7;}
.spark-one {top:12%;right:10%;}
.spark-two {bottom:16%;left:11%;font-size:22px;}
.ground-shadow {position:absolute;left:22%;bottom:35px;width:62%;height:36px;border-radius:50%;filter:blur(20px);background:rgba(0,0,0,.62);transition:opacity 1s,transform 1s;}
.floating-note {position:absolute;right:3%;bottom:14%;color:var(--muted);font:italic 14px var(--serif);transform:rotate(-7deg);transition:opacity .4s;}
.floating-note > span {display:block;font-size:32px;font-style:normal;margin-left:10px;line-height:1.2;}
.showcase:not([data-state=sealed]) .floating-note {opacity:0;}

/* Cards */
.card-deck {position:absolute;inset:0;}
.collectible {
  --x:0px;--y:0px;--rz:0deg;--scale:1;--flip:0deg;
  position:absolute;left:50%;top:46%;width:var(--card-w);aspect-ratio:3 / 5;border-radius:12px;
  transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rz)) scale(var(--scale));
  transition:transform 1.05s var(--ease),opacity .6s;will-change:transform;z-index:var(--z,1);
  perspective:1100px;isolation:isolate;
}
.card-rotator,.card-flipper {position:absolute;inset:0;transform-style:preserve-3d;}
/* Resting cards stay flat; unpack-tilt.js owns motion. */
.card-rotator,.sleeve {transition:transform .25s ease-out;}
.stage[data-tilt] :is(.card-rotator,.sleeve) {transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));}
.showcase[data-opening] :is(.card-rotator,.sleeve) {transform:none;transition:none;}
.card-flipper {transform:rotateY(var(--flip));transition:transform .95s var(--ease);}
.card-face {
  position:absolute;inset:0;border-radius:11px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid rgba(188,212,222,.34);box-shadow:0 20px 45px #0008,0 1px 0 #ffffffd0 inset;transform:translateZ(1px);
  font-size:calc(var(--card-w) * .075);line-height:1.25;
}
.card-front {--tone:#20435a;--tone-2:#0f1d27;display:flex;flex-direction:column;align-items:center;text-align:center;padding:9% 8%;background:linear-gradient(160deg,var(--tone) 0%,var(--tone-2) 62%),#0f1d27;}
.card-front::before {content:'';position:absolute;inset:5%;border:1px solid #ffffff4d;border-radius:7px;pointer-events:none;}
/* Small-print and CTA size floors. */
.offer-kicker,.offer-terms {position:relative;font-size:max(.62em,7px);letter-spacing:min(.18em,calc(var(--card-w) * .0085));text-transform:uppercase;opacity:.85;pointer-events:none;}
.card-shine {position:absolute;inset:0;pointer-events:none;opacity:.44;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 20%,#ffffff0a 35%,#ffffff50 45%,#ffffff08 52%,transparent 62%);background-size:240% 100%;background-position:var(--shine-x,65%) 50%;}
.card-offer {justify-content:center;gap:3%;}
.offer-name {position:relative;font:1.55em/1.1 var(--serif);pointer-events:none;}
.offer-text {position:relative;font-size:max(.8em,8px);opacity:.9;pointer-events:none;}
.card-cta {
  position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;min-width:44px;min-height:calc(44px / var(--focus-scale));margin-top:4%;padding:.55em .9em;white-space:nowrap;border-radius:6px;background:var(--cta);color:#0c1a24;font-weight:750;font-size:max(.9em,8px);text-decoration:none;box-shadow:0 4px 12px #0006;
}
.card-cta:hover {filter:brightness(1.06);}
.card-cta[hidden] {display:none;}
.card-back {transform:rotateY(180deg) translateZ(1px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-color:#69d0ff;background:repeating-linear-gradient(45deg,transparent 0 7px,#ffffff08 7px 8px),#0f1d27;}
.card-back::before {content:'';position:absolute;inset:6%;border:1px solid #20435a;border-radius:6px;}
.back-mark {font:3.4em var(--serif);color:var(--accent);line-height:1;}
.back-word {font-weight:750;letter-spacing:.1em;margin-top:10%;}
.back-number {position:absolute;bottom:10%;font-size:.5em;letter-spacing:.2em;color:var(--muted);}

.showcase[data-state=sealed] :is(.collectible,.card-flipper) {transition:none;}
.showcase:is([data-state=sealed],[data-state=positioning]) .card-deck,
.showcase[data-state=opening]:not([data-opening=flight]):not([data-opening=reveal]) .card-deck {visibility:hidden;opacity:0;pointer-events:none;}
.showcase[data-state=opening] .collectible {--flip:180deg;--x:0px;--y:22px;--rz:0deg;--scale:.88;}
.showcase[data-state=revealing] .collectible,.showcase[data-state=complete] .collectible {--flip:180deg;--x:0px;--y:6px;--rz:0deg;--scale:.84;}
.showcase .collectible.active {--flip:0deg;--x:0px;--y:max(3px,calc(var(--stage-h,0px) * .04));--rz:-3deg;--scale:var(--focus-scale);z-index:20;opacity:1;}

/* Pack (U2):original photo,cropped to the wrapper without stretching.
   The silhouette uses the approved photo mask,normalized to its bounds. */
.sleeve-float {
  --pack-h:361px;--pack-w:calc(var(--pack-h) * .661009);
  --pack-outline:polygon(0.439% 0.000%,99.429% 0.000%,99.286% 3.888%,96.563% 13.166%,95.696% 71.780%,96.420% 87.311%,97.705% 91.382%,100.000% 96.305%,100.000% 100.000%,0.000% 100.000%,0.867% 95.361%,3.590% 88.823%,5.018% 75.667%,5.161% 37.123%,4.590% 13.258%,3.590% 8.334%,0.439% 4.071%);
  position:absolute;left:50%;top:48%;width:var(--pack-w);height:var(--pack-h);z-index:25;
  transform:translate(-50%,-42%) rotate(-6deg);transform-style:preserve-3d;pointer-events:none;
  transition:transform .8s var(--ease),opacity .6s;filter:drop-shadow(10px 22px 17px #0008);
}
.sleeve {position:relative;width:100%;height:100%;transform-style:preserve-3d;}
.sleeve-depth {position:absolute;inset:0;clip-path:var(--pack-outline);transform:translateZ(-4px) translate(2px,2px);background:linear-gradient(90deg,#151922,#b4b5bc 3%,#1a1d27 6% 94%,#b4b5bc 98%,#151922);}
.sleeve-shell {position:absolute;inset:0;}
.pack-art {
  position:absolute;left:0;top:0;width:var(--pack-w);height:var(--pack-h);clip-path:var(--pack-outline);pointer-events:none;
  background:url('/packz/assets/original-cfcd0b3a.jpg') 50.299388% 47.052349% / 338.946713% 125.754333% no-repeat;
}
.tear-strip {position:absolute;inset:0;width:100%;z-index:5;padding:0;background:transparent;pointer-events:auto;cursor:pointer;touch-action:pan-y pinch-zoom;transform:translateX(calc(var(--tear,0) * 18px)) rotate(calc(var(--tear,0) * -3deg));transition:transform .3s;}
.tear-strip:disabled {cursor:wait;}
.seal-hint {position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);padding:7px 10px;border:1px solid rgba(var(--accent-rgb),.3);border-radius:4px;white-space:nowrap;font-size:11px;letter-spacing:1.2px;color:var(--accent);background:#0c1a24ed;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;}
.tear-strip:hover .seal-hint,.tear-strip:focus-visible .seal-hint {opacity:1;transform:translate(-50%,0);}
.showcase[data-state=sealed] .sleeve-float {transition:none;transform:translate(-50%,-42%) rotate(-8deg);animation:pack-idle-float 4.2s cubic-bezier(.45,0,.55,1) infinite;}
@media (hover:hover) and (pointer:fine) {
  .showcase[data-state=sealed] .sleeve-float {pointer-events:auto;}
  .showcase[data-state=sealed] .sleeve-float:hover .sleeve {animation:pack-hover-shake .6s ease-in-out infinite;}
}
.showcase[data-state=revealing] .sleeve-float,.showcase[data-state=complete] .sleeve-float {opacity:0;visibility:hidden;pointer-events:none;animation:none;}

/* Caption and reset */
.card-caption {text-align:center;min-height:96px;position:relative;z-index:30;padding:0 18px;}
.caption-eyebrow {font-size:11px;letter-spacing:2px;color:var(--accent);}
.card-caption h2 {font-size:22px;font-weight:550;letter-spacing:-.4px;margin:8px 0 4px;}
.card-caption p {font-size:14px;color:var(--muted);margin:0;}
.progress-row {display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 0;font-size:11px;letter-spacing:1.1px;color:var(--muted);}
.reset {background:none;min-width:44px;min-height:44px;padding:10px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.reset svg {width:16px;height:16px;}
.reset:hover {color:var(--accent);}

@media (min-width:1500px) {
  .stage {height:580px;}
  .showcase {--card-w:197px;}
  .sleeve-float {--pack-h:412px;--pack-w:calc(var(--pack-h) * .661009);}
}
@media (max-width:1100px) {
  .showcase {--card-w:149px;--focus-scale:1.47;}
  .stage {height:466px;}
  .sleeve-float {--pack-h:322px;--pack-w:calc(var(--pack-h) * .661009);}
  .intro h1 {font-size:52px;letter-spacing:-2px;}
}
/* Phone hero sized from the small viewport (svh:browser bars shown,as in iOS Safari),100vh as the fallback.
   After unlocking,the stage reserves room for the header,headline,caption,reset and open button
   (--hero-chrome),keeping the opening action and offer CTA visible down to 320 x 568. */
:root {--hero-vh:100vh;}
@supports (height:1svh) {:root {--hero-vh:100svh;}}
@media (max-width:760px) {
  .experience {display:flex;flex-direction:column;min-height:0;padding:6px 6px 28px;}
  .intro {display:contents;}
  .intro .eyebrow {order:0;align-self:flex-start;}
  .intro h1 {order:1;align-self:flex-start;font-size:clamp(30px,9vw,52px);letter-spacing:-1.5px;margin:8px 0 6px;}
  .intro h1 br {display:none;}
  .intro h1 em {display:block;}
  .showcase {
    order:3;width:100%;--hero-chrome:378px;--stage-max:360px;
    --stage-h:clamp(200px,calc(var(--hero-vh) - var(--hero-chrome)),var(--stage-max));
    --card-w:min(147px,calc(var(--stage-h) * .38));--focus-scale:1.4;
  }
  /* The kicker sits on the top edge of the stage and fades once the cards need that room. */
  .stage-kicker {position:absolute;inset:0 0 auto;padding:2px 0 0;transition:opacity .4s;}
  .showcase:not([data-state=sealed]) .stage-kicker {opacity:0;}
  .stage {height:var(--stage-h);}
  .sleeve-float {top:46%;--pack-h:min(286px,calc(var(--stage-h) * .8));--pack-w:calc(var(--pack-h) * .661009);}
  .card-caption {min-height:90px;line-height:1.4;}
  .card-caption h2 {font-size:20px;line-height:1.2;margin:4px 0 2px;}
  .card-caption p {font-size:13px;}
  .progress-row {padding:0;}
  .floating-note {display:none;}
  .actions {order:4;width:100%;align-items:center;}
  .primary {max-width:100%;}
  .interaction-help {order:5;text-align:center;}
  .intro .lead {order:6;font-size:14px;line-height:1.5;margin:8px 0 0;}
  .intro-note {order:7;max-width:none;}
}
@media (max-width:400px) {
  .showcase {--stage-max:340px;--card-w:min(133px,calc(var(--stage-h) * .38));}
  .sleeve-float {--pack-h:min(271px,calc(var(--stage-h) * .8));}
}
@media (max-width:360px) {
  /* Floor of 88 px keeps the CTA and the age notice legible; with the lower focus scale the card still fits the 200 px stage. */
  .showcase {scroll-margin-top:12px;--stage-max:320px;--card-w:clamp(88px,calc(var(--stage-h) * .38),118px);--focus-scale:1.3;}
  .sleeve-float {--pack-h:min(253px,calc(var(--stage-h) * .8));}
}

.email-gate{width:100%;max-width:560px;margin:24px 0 12px;container-type:inline-size;color:#ffffffb8;font:16px/normal "Segoe UI",Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:auto}
.gate-card{padding:20px;border-radius:20px;background:#0c1a2485;border:2.5px solid #69d0ffbf;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px #69d0ff66,0 22px 50px -18px rgba(0,0,0,.72),0 0 52px -8px #69d0ff73,inset 0 1px 0 #ffffff17}
.gate-row{display:flex;gap:10px}
.gate-row input{flex:1;min-width:0;height:58px;padding:0 20px;border:0;border-radius:10px;background:#fffaf0;color:#1a1300;font:900 16px Arial,sans-serif;box-shadow:inset 0 0 0 1px #ffcf3a61}
.gate-row input::placeholder{color:rgba(20,12,0,.58);opacity:1}
.gate-row input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gate-row input[aria-invalid=true]{box-shadow:inset 0 0 0 2px #b83220}
.gate-row button{flex:none;min-width:190px;height:56px;padding:0 28px;border-radius:12px;color:#fff;font:950 16px Arial,sans-serif;white-space:nowrap;background:linear-gradient(#027bb3,color-mix(in srgb,#027bb3,#000 34%));box-shadow:0 6px 0 rgba(0,0,0,.42),0 14px 22px #029ee64d}
.gate-row button:disabled{opacity:.62;cursor:wait}
.gate-badges{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:14px;font-size:12.8px;font-weight:600}
.gate-badges span{display:inline-flex;gap:6px}
.gate-trust{margin:16px 0 0;font-size:14.72px;font-weight:600}
.gate-trust span{color:#ffcf3a;letter-spacing:2px;margin-right:3px}
.gate-help,.gate-error,.gate-privacy{font-size:12px;line-height:1.4;margin:8px 0 0}
.gate-error{color:#ffa99b}
.gate-error:empty{display:none}
.gate-privacy{display:inline-flex;align-items:center;min-height:44px;margin:0}
.showcase[data-unlocked=false] .tear-strip{cursor:default}
@container(max-width:480px){.gate-row{flex-direction:column}.gate-row input{flex:auto}.gate-row button{width:100%}}
@media(max-width:760px){.email-gate{order:2}.interaction-help{min-height:1.6em}}
@media(max-width:560px){.gate-row button{height:58px}}

@media(max-width:760px){.showcase[data-unlocked=true]{--hero-chrome:64px;--stage-max:480px;--card-w:min(200px,calc(var(--stage-h) * .44));--focus-scale:1.3}}