/* THUNDER HONEY V3 motion layer. Pairs with motion.js; the markup contract is at the top of motion.js.
   Transforms and opacity only. Everything motion-driven switches off under prefers-reduced-motion. */

@property --px-zoom{syntax:'<number>';inherits:false;initial-value:1}

:root{
  --mo-ready:1;
  --bloom-from:perspective(1200px) translate3d(0,24px,0) rotateX(7deg) scale(.94);
  --mo-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. parallax ---------- */
.px-host{overflow:hidden;isolation:isolate}
[data-px]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:50% 50%;
  transition-property:opacity,filter,--px-zoom!important;transition-duration:.9s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important}
.px-on{will-change:transform}

/* ---------- 2. tilt ---------- */
[data-tilt].is-tilting{will-change:transform;
  transition-property:opacity,background-color,border-color,color,box-shadow,filter!important}
:where([data-tilt-glare]){position:relative}
[data-tilt-glare]{isolation:isolate}
[data-tilt-glare]::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  opacity:calc(var(--tilt-g,0) * .9);
  background:radial-gradient(70% 70% at calc(50% + var(--tilt-x,0) * 45%) calc(50% + var(--tilt-y,0) * 45%),rgba(255,255,255,.26),rgba(255,255,255,0) 62%)}

/* ---------- 3. bloom ----------
   Hidden before motion.js runs, with a failsafe that reveals it after 3.5s if it never does. */
[data-bloom]:not(.is-bloomed){opacity:0;transform:var(--bloom-from);transform-origin:50% 100%;animation:mo-failsafe .6s ease 3.5s forwards}
html.mo-bloom [data-bloom]{animation:none}
html.mo-bloom [data-bloom]:not(.is-bloomed){opacity:0;transform:var(--bloom-from)}
html.mo-bloom [data-bloom].is-bloomed:not(.bloom-done){opacity:1;transform:none;transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1.2s var(--mo-ease)}
/* after .bloom-done nothing here applies, so the element's own styles are back in charge */
@keyframes mo-failsafe{to{opacity:1;transform:none}}

/* ---------- 4. flip ---------- */
.flip{display:block;width:100%;margin:0;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  -webkit-perspective:1600px;perspective:1600px}
.flip__in{display:grid;position:relative;width:100%;height:100%;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.85,.25,1)}
.flip__f,.flip__b{grid-area:1/1;display:block;position:relative;min-width:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip__f{transform:rotateY(0deg)}
.flip__b{transform:rotateY(180deg)}
.flip[aria-pressed="true"] .flip__in,.flip.is-flipped .flip__in{transform:rotateY(180deg)}
/* Belt and braces for browsers that skip backface culling: the faces also swap visibility at
   the moment the card is edge-on (0.15s into the .85s turn, where this easing passes 90 degrees). */
.flip__f,.flip__b{transition:visibility 0s linear .15s}
.flip__b{visibility:hidden}
.flip[aria-pressed="true"] .flip__f,.flip.is-flipped .flip__f{visibility:hidden}
.flip[aria-pressed="true"] .flip__b,.flip.is-flipped .flip__b{visibility:visible}
/* the card rises toward you as it turns, then settles */
.flip.is-turn-a .flip__in{animation:mo-lift-a .85s cubic-bezier(.3,.85,.25,1)}
.flip.is-turn-b .flip__in{animation:mo-lift-b .85s cubic-bezier(.3,.85,.25,1)}
@keyframes mo-lift-a{0%{scale:1}45%{scale:1.045}100%{scale:1}}
@keyframes mo-lift-b{0%{scale:1}45%{scale:1.045}100%{scale:1}}
/* a small peek turn the first time a card enters view, so it reads as something that turns */
.flip.mo-peek .flip__in{animation:mo-peek 1.25s cubic-bezier(.45,0,.2,1)}
@keyframes mo-peek{0%{rotate:y 0deg}38%{rotate:y -20deg}72%{rotate:y 3deg}100%{rotate:y 0deg}}

/* ---------- 5. turntable ----------
   On a dark surface the canvas blends with "lighten": the navy studio background of the frames
   gives way to whatever glow or gradient sits behind, so there is never a rectangle around the
   pouch. The pouch itself is far brighter than any navy, so it is untouched. */
.tt{position:relative;width:100%;aspect-ratio:4/5;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tt>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;z-index:1;
  touch-action:pan-y pinch-zoom;cursor:grab;-webkit-tap-highlight-color:transparent;outline-offset:-3px}
.tt.tt--blend>canvas{mix-blend-mode:lighten}
/* On a light surface the cut frames (img/turntable-cut, re-matted 29 Sep 2026 so the side seals are
   whole at every angle) get a hairline navy contact edge, so the silver never melts into a pale or
   white halo. A page may set its own filter on the canvas; keep a 1px edge like this one in it. */
.tt:not(.tt--blend)>canvas{filter:drop-shadow(0 0 1px rgba(7,30,58,.36))}
/* a soft navy floor shadow under the pouch, placed on the drawn frame by motion.js */
.tt::before{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  left:calc(var(--tt-fx,0px) + var(--tt-fw,100%) * .2);width:calc(var(--tt-fw,100%) * .6);
  top:calc(var(--tt-fy,0px) + var(--tt-fh,100%) * .9);height:calc(var(--tt-fh,100%) * .08);
  background:radial-gradient(closest-side,rgba(3,14,32,.55),rgba(3,14,32,.22) 55%,rgba(3,14,32,0))}
.tt.is-dragging>canvas{cursor:grabbing}
/* a soft studio light across the pouch */
.tt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:radial-gradient(52% 40% at 50% 38%,rgba(255,255,255,.10),rgba(255,255,255,0) 72%)}
.tt__ctl{position:absolute;top:12px;right:12px;z-index:3;display:grid;gap:8px}
.tt__btn{position:relative;width:44px;height:44px;border-radius:999px;color:var(--snow,#fff);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
.tt__btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.tt__btn:active{transform:scale(.94)}
.tt__btn::before,.tt__btn::after{content:"";position:absolute;box-sizing:border-box}
/* pause: two bars; paused: a play mark */
.tt__btn--pause::before,.tt__btn--pause::after{top:15px;width:3px;height:13px;border-radius:2px;background:currentColor}
.tt__btn--pause::before{left:16px}
.tt__btn--pause::after{left:24px}
.tt.is-paused .tt__btn--pause::before{left:17px;top:14px;width:0;height:0;border-radius:0;background:none;
  border-style:solid;border-width:7.5px 0 7.5px 12px;border-color:transparent transparent transparent currentColor}
.tt.is-paused .tt__btn--pause::after{display:none}
/* enlarge: two corner marks */
.tt__btn--big::before,.tt__btn--big::after{width:9px;height:9px;border:1.6px solid currentColor}
.tt__btn--big::before{top:13px;right:13px;border-left:0;border-bottom:0}
.tt__btn--big::after{bottom:13px;left:13px;border-right:0;border-top:0}

/* the enlarged pouch */
html.tt-lb-open{overflow:hidden}
.tt-lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:radial-gradient(40% 44% at 50% 46%,rgba(255,255,255,.05),rgba(255,255,255,0) 72%),rgb(10,42,78);
  overscroll-behavior:contain;opacity:0;transition:opacity .35s ease}
.tt-lb[hidden]{display:none}
.tt-lb.is-on{opacity:1}
.tt-lb__in{display:grid;justify-items:center;gap:14px}
/* the entrance moves the canvas itself, so no wrapper isolates its blend */
.tt-lb__cv{display:block;width:min(92vw,900px,calc(82vh * .76));height:auto;max-height:82vh;aspect-ratio:.76;
  touch-action:none;cursor:grab;mix-blend-mode:lighten;
  transform:perspective(1400px) translate3d(0,24px,0) rotateX(6deg) scale(.95);transition:transform .6s var(--mo-ease)}
.tt-lb.is-on .tt-lb__cv{transform:none}
/* the cut frames carry their own edge: no blend, so the shadowed side keeps its depth */
.tt-lb__cv.tt-lb__cv--alpha{mix-blend-mode:normal}
.tt-lb__cv:active{cursor:grabbing}
.tt-lb__hint{margin:0;font-size:14px;color:rgba(255,255,255,.62);text-align:center}
.tt-lb__x{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:999px;font-size:26px;line-height:1;
  color:var(--snow,#fff);border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06)}
.tt-lb__x:hover{background:rgba(255,255,255,.14)}

/* ---------- 6. marquee ---------- */
[data-marquee]{overflow:hidden;position:relative;max-width:100%}
.mq{-webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
.mq.mq--hard{-webkit-mask-image:none;mask-image:none}
.mq__track{display:flex;width:max-content;will-change:transform}
.mq__set{display:flex;flex:none;align-items:stretch;gap:var(--mq-gap,var(--mq-gap-auto,24px));padding-right:var(--mq-gap,var(--mq-gap-auto,24px))}
.mq__set>*{flex:none;max-width:86vw}
.mq--manual{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
.mq--manual .mq__set>*{scroll-snap-align:start}

/* ---------- 7. count ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- 8. grain ---------- */
:where(.grain){position:relative}
.grain{isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  opacity:.11;mix-blend-mode:overlay;background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")}
.grain.grain--strong::after{opacity:.2}
.grain.grain-on:not(.grain--still)::after{animation:mo-grain .9s steps(1) infinite}
@keyframes mo-grain{
  0%{background-position:0 0}
  20%{background-position:-67px 41px}
  40%{background-position:83px -109px}
  60%{background-position:-131px -58px}
  80%{background-position:29px 97px}
}

/* ---------- reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  [data-bloom],html.mo-bloom [data-bloom]:not(.is-bloomed){opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .flip__in,.flip__f,.flip__b{transition:none!important;animation:none!important}
  .grain::after{animation:none!important}
  .tt-lb,.tt-lb__cv{transition:none!important}
  .tt-lb__cv{transform:none!important}
  .mq__track{transform:none!important}
}