/* WearSlabs: "Make your own" binder hero (components/ws/CustomBinderHero.tsx + CustomHeroScene.tsx).
   Default styles are the finished scene (no JavaScript, reduced motion, or the scripts never start).
   .ws-js .chero--wait is the first frame while the scripts load; .chero--run is the scroll story (gsap owns transforms). */

.chero { position: relative; height: 100vh; height: 100svh; margin-top: -92px; --off: min(27vw, 380px); --cy: 50%; }
.ws-js .chero--wait, .chero--run { height: 300vh; }
@media (min-width: 900px) {
  .chero { --cy: 55%; }
  .ws-js .chero--wait, .chero--run { height: 360vh; }
}

.chero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, #17171f 0%, var(--ink) 64%); }
.chero__glow { position: absolute; left: 50%; top: var(--cy); width: min(120vw, 900px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110,150,255,.24), rgba(167,123,255,.10) 45%, transparent 72%); opacity: .55; pointer-events: none; }

/* ---------- title: "Your photo. / Your binder." becomes "One of one. / $89" ---------- */
.chero__title { position: absolute; left: 0; right: 0; top: calc(92px + 1.5svh); z-index: 1; display: grid; justify-items: center; padding: 0 var(--gutter); font-size: clamp(30px, min(8.6vw, 11svh), 124px); text-align: center; pointer-events: none; }
.ct { display: block; white-space: nowrap; will-change: transform, opacity; }
.ct--1 { grid-area: 1 / 1; color: var(--bone); }
.ct--2 { grid-area: 2 / 1; color: transparent; -webkit-text-stroke: 1.5px rgba(243,241,234,.75); }
.ct--f { grid-area: 1 / 1 / 3 / 2; display: grid; justify-items: center; color: var(--bone); }
.ct--f em { display: block; font-style: italic; }
/* finished scene: the offer title only */
.chero .ct--1, .chero .ct--2 { opacity: 0; }
.ws-js .chero--wait .ct--1, .ws-js .chero--wait .ct--2, .chero--run .ct--1, .chero--run .ct--2 { opacity: 1; }
.ws-js .chero--wait .ct--f { opacity: 0; }

.chero__intro { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 4; padding: 0 var(--gutter); margin: 0 auto; max-width: 440px; text-align: center; color: var(--muted); font-size: 15px; text-shadow: 0 2px 16px rgba(0,0,0,.9); opacity: 0; }
.chero__intro b { color: var(--bone); font-weight: 600; }
.ws-js .chero--wait .chero__intro, .chero--run .chero__intro { opacity: 1; }
.chero__hint { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; z-index: 3; opacity: 0; }
.chero__hint span { width: 1px; height: 20px; background: linear-gradient(var(--bone), transparent); animation: chHint 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes chHint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.ws-js .chero--wait .chero__hint, .chero--run .chero__hint { opacity: 1; }

/* ---------- the photo and the binder, each held in a hand (hand picture stacked on the object picture) ---------- */
.chero__stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* the shadow sits on the pair, so stacked they cast the same one shadow as the old one-piece picture */
.ch-held { position: absolute; left: 50%; top: var(--cy); width: min(50vw, 36svh, 330px); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); will-change: transform; opacity: 0; transform: translate(-50%, -50%); }
.ch-held--binder { width: min(50vw, 35.2svh, 323px); } /* same height as the photo (600 x 784 vs 600 x 802) */
.ch-held__obj { position: relative; display: block; width: 100%; height: auto; } /* positioned, so the back piece of the hand paints under it */
.ch-held__hand { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; }
/* the shot crops the wrist (and the photo hand's fingers on the left): fade those cut edges so they never show as lines once the hand moves */
.ch-held--photo .ch-held__hand { -webkit-mask-image: linear-gradient(to top, transparent, #000 13%), linear-gradient(to right, transparent, #000 9%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent, #000 13%), linear-gradient(to right, transparent, #000 9%); mask-composite: intersect; }
.ch-held--binder .ch-held__hand { -webkit-mask-image: linear-gradient(to top, transparent, #000 13%), linear-gradient(to left, transparent, #000 9%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent, #000 13%), linear-gradient(to left, transparent, #000 9%); mask-composite: intersect; }
.ws-js .chero--wait .ch-held { opacity: 1; }
.ws-js .chero--wait .ch-held--photo { transform: perspective(1100px) translate(-50%, -50%) translateX(calc(-1 * var(--off))) rotateY(18deg) rotate(-4deg); }
.ws-js .chero--wait .ch-held--binder { transform: perspective(1100px) translate(-50%, -50%) translateX(var(--off)) rotateY(-18deg) rotate(4deg); }
.chero--run .ch-held { opacity: 1; }
/* holo flash: a white core inside a soft rainbow ring */
.ch-flash { position: absolute; left: 50%; top: var(--cy); width: min(92vw, 640px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.95) 14%, rgba(255,255,255,0) 40%); }
.ch-flash::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 20deg, #ff5fa2, #ffcf5c, #5cffb1, #5cc8ff, #a77bff, #ff5fa2); filter: blur(28px); opacity: .7;
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 46%, transparent 68%); mask: radial-gradient(circle, transparent 30%, #000 46%, transparent 68%); }

/* ---------- the binder (Binder3D) ---------- */
.ch-binder { position: absolute; left: 50%; top: var(--cy); z-index: 3; transform: translate(-50%, -50%); --b3d-w: min(56vw, 33svh, 290px); pointer-events: none; }
.ws-js .chero--wait .ch-binder { opacity: 0; }
/* keep the reveal spin truly 3D: without this the binder is flattened to a picture and its front shows mirrored mid-turn */
.ch-binder, .ch-binder .b3d { transform-style: preserve-3d; }
/* it can be dragged once the scene has finished (always in the finished scene) */
.chero:not(.chero--run) .ch-binder, .chero.is-live .ch-binder { pointer-events: auto; }

/* ---------- offer + button ---------- */
.chero__cta { position: absolute; left: 0; right: 0; bottom: max(18px, 3svh); z-index: 5; padding: 0 var(--gutter); text-align: center; display: grid; justify-items: center; gap: 12px; }
.ws-js .chero--wait .chero__cta { opacity: 0; transform: translateY(30px); }
.chero--run:not(.is-live) .chero__cta { pointer-events: none; }
.chero__sub { max-width: 460px; color: var(--bone); font-size: 14px; line-height: 1.45; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.chero__btn { width: min(100%, 300px); }
.chero__drag { color: var(--muted); font-size: 10px; }

@media (min-width: 900px) {
  .chero__sub { font-size: 16px; max-width: 540px; }
  .chero__intro { font-size: 17px; bottom: 72px; }
  .ch-binder { --b3d-w: min(24vw, 31svh, 320px); }
}

/* less motion: always the finished scene, one screen, nothing pinned */
@media (prefers-reduced-motion: reduce) {
  .ws-js .chero--wait, .chero--run { height: 100vh; height: 100svh; }
  .ws-js .chero--wait :is(.ct--1, .ct--2, .chero__intro, .chero__hint, .ch-held) { opacity: 0; }
  .ws-js .chero--wait :is(.ct--f, .ch-binder) { opacity: 1; }
  .ws-js .chero--wait .chero__cta { opacity: 1; transform: none; }
  .chero__hint span { animation: none; }
}