/* ============================================================
   Smile for Helena — styles
   Design tokens + exact positions pulled from the Figma file
   (frame = 1200 x 827, scaled to fit the viewport).
   ============================================================ */

:root{
  --bg:#f6f3ee;      /* page / frame background */
  --ink:#000;        /* display headline */
  --ink-2:#4a4a49;   /* eyebrow, nav links */
  --ink-3:#62605e;   /* hint text */
  --muted:#b0b0b0;   /* "(R)" */
  --frame-w:1200px;
  --frame-h:827px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  overflow:hidden;
  font-family:"General Sans","Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* full-viewport warm glow behind everything — always full width, independent of the stage */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../assets/glow.svg") no-repeat center bottom;
  background-size:140% 52%;
}
.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- fixed 1200x827 stage, scaled to fit; overflow visible so gallery items
   can be dragged out into the full-viewport canvas (body still clips at the edge) ---- */
#stage{
  position:absolute;left:50%;top:50%;z-index:1;
  width:var(--frame-w);height:var(--frame-h);
  transform:translate(-50%,-50%) scale(var(--scale,1));
  transform-origin:center;
  background:transparent;
  overflow:visible;
}

.screen{position:absolute;inset:0;width:var(--frame-w);height:var(--frame-h)}
.screen[hidden]{display:none}

/* the warm glow — exact SVG placement (bleeds past the frame, clipped by #stage) */
.glow{display:none}  /* per-screen glow replaced by the full-viewport body::before glow */

.cam{position:absolute;pointer-events:none;user-select:none;object-fit:cover}

/* ---- live webcam feed slots (black until the camera is on) ---- */
.slot{position:absolute;background:#000;overflow:hidden}
.feed-cam{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scaleX(-1);   /* mirror, selfie-style */
  background:#000;display:block;
}

/* ======================= Screen 1 — landing ======================= */
#screen-landing .title{position:absolute;left:40px;top:40px;font-size:48px;line-height:1;color:var(--ink);white-space:nowrap}
#screen-landing .eyebrow{
  position:absolute;left:40px;top:104px;font-size:20px;line-height:1;color:var(--ink-2);
  text-decoration:underline;white-space:nowrap;
  font-family:"Instrument Serif",Georgia,serif;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
}
#screen-landing .eyebrow:hover{color:var(--ink)}
#screen-landing .eyebrow:focus-visible{outline:2px solid var(--ink-2);outline-offset:4px}
#screen-landing{perspective:1800px}
#screen-landing .title,#screen-landing .eyebrow{z-index:6}

/* mover holds the camera; after the flip it bows out (scale down + fade) as the gallery takes over */
#screen-landing .cam-move{position:absolute;left:99px;top:80px;width:1002px;height:744.62px;transform-origin:center;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.5,.05,.2,1),opacity .5s ease}
#screen-landing .cam-move.dismiss{transform:translateY(70px) scale(.5);opacity:0}
/* flip card: front (shooting) <-> back (after 3 shots) */
#screen-landing .cam-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.5,.05,.2,1)}
#screen-landing .cam-flip.flipped{transform:rotateY(180deg)}
#screen-landing .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#screen-landing .face.back{transform:rotateY(180deg)}
#screen-landing .cam-face-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
#screen-landing .lens{left:543.9px;top:375.55px;width:144.068px;height:138.402px;border-radius:29.947px;cursor:pointer}
#screen-landing .lens:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
#screen-landing .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:10}
#screen-landing .flash.is-firing{animation:flash .45s ease}
@keyframes flash{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}

/* self-timer countdown (3-2-1) */
#screen-landing .countdown{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;font-size:300px;line-height:1;color:var(--ink);pointer-events:none;text-shadow:0 0 60px rgba(246,243,238,.95),0 2px 12px rgba(246,243,238,.9)}
#screen-landing .countdown.on{display:flex}
#screen-landing .countdown.pop{animation:countpop 1s cubic-bezier(.2,.7,.3,1)}
@keyframes countpop{0%{transform:scale(1.6);opacity:0}14%{opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:.9}}

/* ======================= Screen 2 — guide ======================= */
/* back-to-shooting control — same serif "(shortcut)" language as the gallery's "again (R)" */
#screen-guide .back{position:absolute;left:64px;top:64px;z-index:6;font-size:32px;line-height:.9;color:var(--ink-2);
  font-family:"Instrument Serif",Georgia,serif;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
#screen-guide .back u{text-decoration:underline}
#screen-guide .back .b{color:var(--muted)}
#screen-guide .back:hover{color:var(--ink)}
#screen-guide .back:focus-visible{outline:2px solid var(--ink-2);outline-offset:4px}
/* heading + steps drop below the back button (matches Figma node 33:48: heading y242, steps y607) */
#screen-guide .col{position:absolute;left:64px;top:242px;width:604px;height:521px;display:flex;flex-direction:column;justify-content:space-between}
#screen-guide .col h1{font-size:120px;line-height:.9;color:var(--ink)}
#screen-guide ol{list-style:decimal;font-size:26px;line-height:1.2;letter-spacing:-.26px;color:var(--ink)}
#screen-guide ol li{margin-left:39px;margin-bottom:16px}
#screen-guide ol li:last-child{margin-bottom:0}
#screen-guide .view{left:723px;top:64px;width:427px;height:699px;border-radius:12px}
#screen-guide .hint{position:absolute;left:24px;top:24px;width:365px;font-size:26px;line-height:1.2;letter-spacing:-.26px;color:var(--ink-3);z-index:2;transition:opacity .4s ease}
#screen-guide .view.is-live .hint{opacity:0}
/* live hand-tracking overlay — skeleton drawn in raw video coords onto this canvas,
   mirrored (scaleX(-1)) to line up with the selfie-mirrored feed */
#screen-guide .track-overlay{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none;z-index:1}
/* practice-shutter flash pulse on the how-to feed (mirrors the front screen's .flash) */
#screen-guide .cap-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:2;border-radius:inherit}
#screen-guide .cap-flash.fire{animation:capflash .5s ease-out}
@keyframes capflash{0%{opacity:0}10%{opacity:.85}100%{opacity:0}}

/* (the standalone camera-back screen was removed; the back now shows via the flip) */

/* ======================= Screen 4 — gallery ======================= */
/* cat-paw cursors: open paw by default, a clustered/curled paw over draggable things */
#screen-gallery{cursor:url("../assets/ui/paw-open.png") 30 20, auto}

#screen-gallery .again,
#screen-gallery .download{
  position:absolute;top:40px;z-index:600;font-size:32px;line-height:.9;color:var(--ink-2);
  font-family:"Instrument Serif",Georgia,serif;background:none;border:0;cursor:pointer;white-space:nowrap;
}
#screen-gallery .again{left:40px}
#screen-gallery .again u{text-decoration:underline}
#screen-gallery .again .r{color:var(--muted)}
#screen-gallery .download{right:40px;text-decoration:underline}
#screen-gallery .again:focus-visible,
#screen-gallery .download:focus-visible{outline:2px solid var(--ink-2);outline-offset:4px}

#screen-gallery .card{position:absolute;z-index:20;width:361.853px;height:440px;background:#fff;margin:0;cursor:url("../assets/ui/paw-grab.png") 30 20, grab;touch-action:none;transition:box-shadow .16s ease}
#screen-gallery .card.lifted{box-shadow:0 14px 34px rgba(60,40,20,.26)}
#screen-gallery .card .print{position:absolute;inset:0;overflow:hidden}
#screen-gallery .card .print img{position:absolute;left:-36.49%;top:-21.28%;width:172.97%;height:142.57%;max-width:none}
#screen-gallery .card .photo{position:absolute;left:26.7px;top:35.5px;width:301px;height:368px;background:#000;overflow:hidden}
#screen-gallery .card .photo img{width:100%;height:100%;object-fit:cover;display:block}

/* centers + rotations straight from the file */
#screen-gallery .card{animation:eject .6s cubic-bezier(.2,.75,.25,1) both}
#screen-gallery .card-a{left:200.4px;top:203.6px;--rot:-20.02deg;transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot));animation-delay:.05s}
#screen-gallery .card-b{left:606.3px;top:254.7px;--rot:6.37deg;transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot));animation-delay:.16s}
#screen-gallery .card-c{left:419.07px;top:93px;--rot:0deg;transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot));animation-delay:.27s}
@keyframes eject{from{transform:translateY(380px) rotate(var(--rot)) scale(.9);opacity:0}to{transform:translateY(0) rotate(var(--rot)) scale(1);opacity:1}}

/* ---- free-floating stickers ---- */
#screen-gallery .sticker-layer{position:absolute;inset:0;z-index:500;pointer-events:none}
#screen-gallery .sticker{position:absolute;pointer-events:auto;cursor:url("../assets/ui/paw-grab.png") 30 20, grab;user-select:none;-webkit-user-select:none;touch-action:none;filter:drop-shadow(0 3px 4px rgba(60,40,20,.30))}
#screen-gallery .sticker.pop{animation:st-pop .3s cubic-bezier(.2,.8,.3,1)}
#screen-gallery .sticker.poof{animation:st-poof .22s ease forwards;pointer-events:none}
@keyframes st-pop{from{transform:translate(-50%,-50%) scale(.2);opacity:0}to{opacity:1}}
@keyframes st-poof{to{transform:translate(-50%,-50%) scale(.3);opacity:0}}

/* ---- cat bowl palette — the focal element; rises + scales in, then drags freely ---- */
#screen-gallery .tray{position:absolute;z-index:300;left:395px;top:485px;width:410px;transform-origin:center bottom;
  transform:translate(var(--tx,0px),var(--ty,0px));touch-action:none;
  cursor:url("../assets/ui/paw-grab.png") 30 20, grab;
  animation:tray-in .72s cubic-bezier(.2,.85,.25,1) both;animation-delay:.32s}
@keyframes tray-in{from{transform:translateY(150px) scale(.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
#screen-gallery .tray.lifted .tray-img{filter:drop-shadow(0 16px 26px rgba(60,40,20,.34))}
#screen-gallery .tray-img{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none;user-select:none}

/* the bunch: all 42 stickers packed + overlapping, piled into the bowl's steel opening */
#screen-gallery .tray-items{position:absolute;z-index:3;left:19%;right:19%;top:14%;bottom:44%}
#screen-gallery .tray-sticker{position:absolute;width:var(--w,64px);height:auto;
  transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px)) rotate(var(--r,0deg));transform-origin:center;
  background:none;border:0;padding:0;margin:0;cursor:url("../assets/ui/paw-grab.png") 30 20, grab;touch-action:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.42));transition:transform .16s cubic-bezier(.2,.7,.3,1), filter .12s}
#screen-gallery .tray-sticker img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
#screen-gallery .tray-sticker:hover{filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
#screen-gallery .tray-sticker:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* cursor hint — rides just below the paw while hovering a photo; mix-blend-mode:difference
   inverts the text against whatever's behind it, so it stays legible on any image */
#cursor-hint{
  position:fixed;left:0;top:0;z-index:700;pointer-events:none;
  transform:translate(-50%,0);
  font-family:"General Sans","Inter",system-ui,sans-serif;
  font-size:12.5px;font-weight:500;letter-spacing:.05em;line-height:1;white-space:nowrap;
  color:#fff;mix-blend-mode:difference;
  opacity:0;transition:opacity .16s ease;
}
#cursor-hint.show{opacity:1}
@media (prefers-reduced-motion: reduce){ #cursor-hint{transition:none} }

/* ======================= debug overlay (?debug) ======================= */
#debug{position:fixed;right:8px;bottom:8px;z-index:9999;background:rgba(0,0,0,.78);padding:6px;border-radius:8px;color:#fff;font:11px/1.4 ui-monospace,Menlo,monospace}
#debug canvas{display:block;width:320px;height:240px;border-radius:4px;background:#000;transform:scaleX(-1)}
#debug pre{margin:6px 2px 2px;white-space:pre-wrap}

/* ======================= motion ======================= */
@media (prefers-reduced-motion: reduce){
  #screen-landing .flash.is-firing{animation:none}
  #screen-landing .cam-flip{transition:none}
  #screen-landing .cam-move{transition:none}
  #screen-landing .countdown.pop{animation:none}
  #screen-gallery .card{animation:none}
  #screen-gallery .tray{animation:none}
  #screen-guide .hint{transition:none}
  #screen-guide .cap-flash.fire{animation:none}
}

/* ======================= rotate-to-landscape nudge (phones, portrait) ======================= */
.rotate-note{display:none}
.rotate-note .rotate-ico{width:60px;height:60px;color:var(--ink-2)}
.rotate-note .rn-title{font-size:44px;line-height:1;color:var(--ink)}
.rotate-note .rn-sub{font-size:16px;line-height:1.3;color:var(--ink-3);max-width:24ch}
.rotate-note .rn-skip{font-size:20px;color:var(--ink-2);background:none;border:0;text-decoration:underline;cursor:pointer;margin-top:6px}
/* only nag actual phones in portrait; landscape (where the design fits) auto-hides it */
@media (orientation: portrait) and (max-width: 767px){
  .rotate-note{display:flex;position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;background:var(--bg);text-align:center;padding:32px}
  .rotate-note.dismissed{display:none}
}