/* Hoodie viewer: still product shot, animated turn + lights */
.h3d-stage {
  --w: 100%;
  --turn: cubic-bezier(.65, 0, .25, 1);
  position: relative; width: var(--w); aspect-ratio: 978 / 980;
  perspective: 1600px; perspective-origin: 50% 45%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline-offset: 6px;
}
.h3d-stage:active { cursor: grabbing; }
.h3d { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.h3d-stage.is-in .h3d { opacity: 1; transform: none; }
.h3d-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: 50% 60%; }
.h3d-img { width: 100%; height: 100%; display: block; pointer-events: none; transition: filter 1.1s ease; }

/* turn: the outgoing side swings away and fades early, the incoming side swings in late */
.h3d-front { transform: none; opacity: 1; transition: transform .9s var(--turn), opacity .5s ease .18s; }
.h3d-back { transform: rotateY(48deg) translateX(7%) scale(.95); opacity: 0; transition: transform .9s var(--turn), opacity .5s ease .1s; }
.h3d-stage.is-back .h3d-front { transform: rotateY(-48deg) translateX(-7%) scale(.95); opacity: 0; transition: transform .9s var(--turn), opacity .5s ease .1s; }
.h3d-stage.is-back .h3d-back { transform: none; opacity: 1; transition: transform .9s var(--turn), opacity .5s ease .18s; }
/* a band of light sweeps across while it turns */
.h3d-sheen { position: absolute; inset: -10% -40%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .38) 50%, transparent 62%); mix-blend-mode: soft-light; transform: translateX(-60%); }
.h3d-stage.is-turning .h3d-sheen { animation: sheenSweep .95s var(--turn); }
.h3d-stage.is-back.is-turning .h3d-sheen { animation-name: sheenSweepR; }
@keyframes sheenSweep { 0% { opacity: 0; transform: translateX(-60%); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@keyframes sheenSweepR { 0% { opacity: 0; transform: translateX(60%); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-60%); } }

/* back print (artwork from the client's design.pdf) */
.h3d-print { position: absolute; left: 29.55%; top: 34.47%; width: 40.89%; height: auto; overflow: visible; pointer-events: none; }
/* the print is artwork: always left-to-right, even on the Arabic site */
.h3d-print, .lay, .ex-print { direction: ltr; unicode-bidi: isolate; }
.pa-rows { fill: #737373; transition: fill 1s, opacity 1s; }
.pa-solid, .pa-star { fill: #12868e; transition: fill 1.1s; }
.pa-fr { fill: #1d1d1b; transition: fill 1s; }
.pa-year { fill: #737373; transition: fill 1s; }
.pa-rule { stroke: #1d1d1b; transition: stroke 1s; }
.pa-rows-glow, .pa-top-glow { opacity: 0; transition: opacity .6s ease; }
.pa-rows-glow, .pa-top-glow .pa-fr, .pa-top-glow .pa-year { fill: #fff; }
.pa-top-glow .pa-rule { stroke: #fff; }

/* lights off: fabric darkens, the reflective ink catches the light (solid FIKR and the star stay dark, like the real print) */
.h3d-stage.is-dark .h3d-img { filter: brightness(.26) saturate(.5) contrast(1.05); }
.h3d-stage.is-dark .pa-solid, .h3d-stage.is-dark .pa-star { fill: #0e5f66; }
.h3d-stage.is-dark .pa-rows { fill: #fff; opacity: .9; }
.h3d-stage.is-dark .pa-top .pa-fr, .h3d-stage.is-dark .pa-top .pa-year { fill: #d8d6d0; }
.h3d-stage.is-dark .pa-top .pa-rule { stroke: #d8d6d0; }
.h3d-stage.is-dark .pa-rows-glow, .h3d-stage.is-dark .pa-top-glow { opacity: 1; }
/* switching off: the ink flickers on like it just caught a flash */
.h3d-stage.lights-out .pa-rows-glow, .h3d-stage.lights-out .pa-top-glow, .h3d-stage.lights-out .pa-rows { animation: inkOn 1.4s steps(1, end); }
@keyframes inkOn { 0% { opacity: 0; } 30% { opacity: .9; } 36% { opacity: .1; } 44% { opacity: 1; } 50% { opacity: .25; } 62% { opacity: 1; } }

.lay { position: absolute; inset: 0; width: 100%; height: auto; overflow: visible; }

/* ---------- viewer controls (shared by home + order) ---------- */
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: rgb(245 239 225 / .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgb(18 64 58 / .14); }
.seg button { border: 0; background: none; padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--pine); opacity: .65; min-height: 34px; transition: background .3s, color .3s, opacity .3s; }
.seg button.is-on { background: var(--pine); color: var(--cream-hi); opacity: 1; }
.is-night .seg { background: rgb(20 34 30 / .75); box-shadow: 0 0 0 1px rgb(234 223 198 / .15); }
.is-night .seg button { color: var(--on-dark); }
.is-night .seg button.is-on { background: var(--cream); color: var(--pine-2); }
.light-switch {
  display: inline-flex; align-items: center; gap: 9px; border: 0; padding: 5px 14px 5px 5px; border-radius: 99px; min-height: 40px;
  background: var(--pine-2); color: var(--cream-hi); font-size: 13px; font-weight: 600; transition: background .5s, color .5s;
}
:root[dir="rtl"] .light-switch { padding: 5px 5px 5px 14px; }
.switch-track { width: 38px; height: 24px; border-radius: 99px; background: #2c4741; position: relative; transition: background .5s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); transition: transform .45s cubic-bezier(.2,.7,.1,1), background .45s, box-shadow .45s; }
:root[dir="rtl"] .switch-knob { left: auto; right: 3px; }
.light-switch[aria-pressed="true"] { background: var(--cream); color: var(--pine-2); }
.light-switch[aria-pressed="true"] .switch-track { background: #0b2b27; }
.light-switch[aria-pressed="true"] .switch-knob { transform: translateX(14px); background: #fff; box-shadow: 0 0 10px 3px rgb(255 255 255 / .8); }
:root[dir="rtl"] .light-switch[aria-pressed="true"] .switch-knob { transform: translateX(-14px); }
.flashbang { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, #fff, rgb(255 255 255 / .55) 40%, transparent 75%); }
.flashbang.go { animation: flashbang .7s ease-out; }
@keyframes flashbang { 0% { opacity: 0; } 10% { opacity: .9; } 100% { opacity: 0; } }