/* =========================================================
   scene.css — the room, the mirror, the dog, your paw
   The rig (dog + phone) is authored at a fixed 760x1212
   design size and moved by a single camera transform.
   ========================================================= */

:root{
  --wall-1:#bdb5ac;
  --wall-2:#948b82;
  --wall-3:#6b645d;
  --fur:#d2a87e;
  --fur-dk:#a97b52;
  --rig-w:760px;
  --rig-h:1212px;
  --ease-cam:cubic-bezier(.65,.02,.18,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:#5f5952;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  cursor:none;
  touch-action:manipulation;
}
body.no-paw{cursor:auto}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
body.no-paw button{cursor:pointer}

/* ---------- the wall behind the mirror ---------- */
.wall{
  position:fixed; inset:0;
  background:
    radial-gradient(120% 90% at 50% 34%, var(--wall-1) 0%, var(--wall-2) 46%, var(--wall-3) 100%);
}
.wall-shadow{
  position:fixed; inset:0;
  background:
    radial-gradient(70% 50% at 50% 96%, rgba(0,0,0,.34), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 22%);
  pointer-events:none;
}

/* ---------- camera stage ---------- */
.stage{position:fixed; inset:0; overflow:hidden}
.rig{
  position:absolute; top:0; left:0;
  width:var(--rig-w); height:var(--rig-h);
  transform-origin:0 0;
  transition:transform 820ms var(--ease-cam);
  will-change:transform;
}
body.no-motion .rig{transition:none}
.rig.snap{transition:none}

/* ---------- the dog, masked out of Banner.jpg ----------
   crop of the source photo: x 830..1710, y 60..620 (of 2448x816)
   the banner's flat studio wall lets a soft elliptical mask
   dissolve the crop straight into the css wall behind it.   */
.dog{
  position:absolute;
  left:60px; top:-5px;
  width:640px; aspect-ratio:880/560;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 49.7% 55%, #000 0 62%, rgba(0,0,0,.72) 80%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 49.7% 55%, #000 0 62%, rgba(0,0,0,.72) 80%, transparent 100%);
  filter:saturate(.94) contrast(1.02);
}
/* cut above the ear tips but below the banner's lettering, then feather
   the cut so it dissolves into the wall instead of drawing a line */
.dog-clip{
  position:absolute; inset:21.2% 0 0 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 2.5%);
          mask-image:linear-gradient(180deg, transparent 0, #000 2.5%);
}
.dog img{
  position:absolute;
  width:278.18%;
  left:-94.318%;
  top:-40.5%;           /* == -10.714% of .dog, re-based on .dog-clip */
  max-width:none;
  pointer-events:none;
  user-select:none;
}
/* reflection sheen across the dog */
.dog::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(112deg, rgba(255,255,255,.10) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.06) 100%);
  pointer-events:none;
}

/* ---------- cigarette smoke, anchored to the lit end ---------- */
.smoke{position:absolute; left:208px; top:356px; width:0; height:0; pointer-events:none}
.smoke span{
  position:absolute; left:0; bottom:0;
  width:26px; height:26px; margin-left:-13px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
  filter:blur(5px);
  opacity:0;
  animation:puff 7s linear infinite;
  animation-delay:calc(var(--i) * -1.16s);
}
@keyframes puff{
  0%{transform:translate(0,0) scale(.4); opacity:0}
  12%{opacity:.55}
  50%{transform:translate(-26px,-120px) scale(1.5); opacity:.34}
  100%{transform:translate(6px,-250px) scale(2.9); opacity:0}
}
body.no-motion .smoke{display:none}

/* ---------- the smokes on the counter ----------
   authored in rig coordinates, beside the fone. the pack is a parody
   of a gold-pack cigarette box, not any real brand's artwork. */
.smokes{
  position:absolute;
  left:492px; top:660px;
  width:330px; height:492px;
  z-index:0;          /* stacking context: keeps the pack's z-indexes local,
                         so they can never sit on top of the fone */
  cursor:none;
}
.smokes-shadow{
  position:absolute; z-index:0; left:55px; bottom:0;
  width:250px; height:49px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.5), transparent 72%);
  filter:blur(3px);
}
.smokes .pack{
  position:absolute; z-index:2; left:75px; bottom:0;
  width:210px; height:295px;
  transform:rotate(-5deg);
  transform-origin:50% 100%;
  filter:drop-shadow(-3px 6px 7px rgba(0,0,0,.4));
  transition:transform .3s cubic-bezier(.3,1.3,.5,1);
}
.smokes:hover .pack{transform:rotate(-5deg) translateY(-3px)}
.pack-lid{
  transform-box:view-box; transform-origin:14px 58px;
  transition:transform .42s cubic-bezier(.25,1.25,.4,1);
}
.smokes.open .pack-lid{transform:rotate(-46deg)}

/* the cigarette, hidden inside the pack until it's drawn out */
.smokes .cig{
  position:absolute; z-index:1; left:157px; top:72px;
  width:25px; height:174px; border-radius:11px 11px 8px 8px;
  background:linear-gradient(100deg,#fdfbf5,#efeade 55%,#cfc9bb);
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  transform:translateY(194px);
  transition:transform .52s cubic-bezier(.2,.9,.3,1);
}
.smokes .cig .filter{
  position:absolute; left:0; right:0; bottom:0; height:59px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(100deg,#e3b673,#c48f45 60%,#a06f30);
}
.smokes .cig .filter::after{
  content:""; position:absolute; left:0; right:0; top:2px; height:1.5px;
  background:rgba(255,255,255,.35);
}
.smokes .cig .ember{
  position:absolute; left:0; right:0; top:0; height:10px;
  border-radius:10px 10px 3px 3px; background:#2e2a26; opacity:0;
  transition:opacity .25s;
}
.smokes.open .cig{transform:translateY(92px)}
.smokes.lit .cig .ember{
  opacity:1;
  background:radial-gradient(circle at 50% 60%, #ffd591, #ff6a1e 55%, #7c2c07);
  box-shadow:0 0 15px 5px rgba(255,112,30,.6);
  animation:ember 2.4s ease-in-out infinite;
}
@keyframes ember{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.3)}}

/* the lighter, which leans in to do the job */
.smokes .lighter{
  position:absolute; z-index:3; left:82px; top:400px;
  width:79px; height:146px;
  transform:rotate(90deg);        /* resting on its side */
  transform-origin:50% 90%;
  filter:drop-shadow(-2px 4px 6px rgba(0,0,0,.42));
  transition:transform .44s cubic-bezier(.35,1.1,.4,1);
}
.smokes.flick .lighter{transform:translate(120px,-240px) rotate(-26deg)}
.smokes .flame{
  position:absolute; z-index:4; left:174px; top:136px;
  width:26px; height:44px;
  opacity:0; transform-origin:50% 100%;
  transition:opacity .12s;
}
.smokes .flame i{
  position:absolute; inset:0;
  border-radius:50% 50% 50% 50% / 74% 74% 26% 26%;
  background:radial-gradient(ellipse at 50% 74%, #ffe9a8, #ffb03a 38%, #ff6a1e 68%, rgba(255,106,30,0) 100%);
  filter:blur(.4px);
}
.smokes .flame b{
  position:absolute; left:7px; bottom:2px; width:11px; height:15px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 70%, #b9e4ff, rgba(140,200,255,0) 72%);
}
.smokes.flick .flame{opacity:1; animation:flicker .11s infinite alternate}
@keyframes flicker{from{transform:scale(1,1)}to{transform:scale(.9,1.16)}}

/* smoke off the lit end */
.smokes .cig-smoke{position:absolute; z-index:5; left:169px; top:164px; width:0; height:0; opacity:0; transition:opacity .5s}
.smokes.lit .cig-smoke{opacity:1}
.smokes .cig-smoke span{
  position:absolute; left:0; bottom:0;
  width:26px; height:26px; margin-left:-13px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.4), rgba(255,255,255,0) 70%);
  filter:blur(4px);
  animation:puff 6s linear infinite;
  animation-delay:calc(var(--i) * -1.2s);
  opacity:0;
}
body.no-motion .smokes .cig-smoke{display:none}

/* ---------- mirror surface ---------- */
.grime{
  position:fixed; inset:0; pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(38% 22% at 18% 24%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(24% 40% at 86% 62%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(14% 8% at 62% 12%, rgba(255,255,255,.09), transparent 70%),
    linear-gradient(74deg, transparent 40%, rgba(255,255,255,.05) 47%, transparent 54%);
  mix-blend-mode:screen;
}
.grime::after{
  content:""; position:absolute; inset:0;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.3);
}

/* finger-written in the condensation */
.fog-write{
  position:fixed; z-index:20; pointer-events:none;
  left:clamp(20px, 6vw, 90px); top:clamp(24px, 11vh, 130px);
  transform:rotate(-3.5deg);
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 -1px 2px rgba(0,0,0,.28);
  transition:opacity .5s ease, transform .5s ease;
  font-family:"Segoe Script","Bradley Hand","Snell Roundhand","Comic Sans MS",cursive;
}
.fog-write h1{
  margin:0; font-size:clamp(30px, 4.4vw, 60px); font-weight:400;
  letter-spacing:.01em; line-height:1;
  filter:blur(.35px);
}
.fog-write p{
  margin:8px 0 0 6px; font-size:clamp(12px, 1.25vw, 17px);
  opacity:.72; filter:blur(.3px);
}
body.is-in .fog-write{opacity:0; transform:rotate(-3.5deg) translateY(-14px)}
@media (max-width:760px){
  .fog-write{left:16px; top:16px; transform:rotate(-3deg)}
  .fog-write p{display:none}
}

/* ---------- HUD ---------- */
.pull-back{
  position:fixed; left:18px; top:18px; z-index:40;
  display:flex; align-items:center; gap:8px;
  padding:9px 15px 9px 12px;
  border-radius:999px;
  color:#f4ece1;
  background:rgba(20,17,14,.42);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-size:13px; letter-spacing:.04em;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.pull-back svg{width:17px;height:17px}
body.is-in .pull-back{opacity:1; transform:none; pointer-events:auto}
.pull-back:hover{background:rgba(20,17,14,.62)}

.tap-hint{
  position:fixed; left:50%; bottom:5vh; transform:translateX(-50%); z-index:30;
  color:#efe6d9; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  animation:hintPulse 2.6s ease-in-out infinite;
  pointer-events:none;
  transition:opacity .4s ease;
}
@keyframes hintPulse{0%,100%{opacity:.35}50%{opacity:.95}}
body.is-in .tap-hint,body.hint-off .tap-hint{opacity:0}

/* ---------- your paw (first person, lives in viewport space) ---------- */
/* paw.png is 228x447 and gets sliced at the wrist (y=270).
   No CSS transition here on purpose — the position is driven every
   frame in paw.js, and a transition on top of that is what makes a
   cursor feel like it's dragging behind your hand. */
.paw-layer{position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden}
.paw-arm,.paw-hand{
  position:absolute; left:0; top:0;
  width:228px;
  background-image:url("../paw.png");
  background-repeat:no-repeat;
  background-size:228px 447px;
  transform:translate(-2000px,-2000px);
  will-change:transform;
  backface-visibility:hidden;
}
/* no drop-shadow: the hand is a straight-cut slice of the png, so a
   shadow would draw a hard line right across the wrist seam. the art
   already carries its own outline. */
.paw-hand{
  height:270px;
  background-position:0 0;
  transform-origin:114px 270px;
}
/* your own forearm is inches from your eye — it belongs slightly out of
   focus, and fading its base keeps it from blocking the screen */
/* no gradient overlay here: a background layer paints the whole element
   box, including the transparent margins either side of the limb, which
   shows up as dark bands along the arm. only the mask may touch alpha. */
/* the slice starts 6px ABOVE the wrist so it tucks up under the hand.
   without the overlap the two halves meet on a shared edge and
   antialiasing leaves a hairline right across the arm. */
.paw-arm{
  height:183px;
  background-position:0 -264px;
  transform-origin:114px 6px;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.3) 100%);
          mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.3) 100%);
}
.paw-hand{transition:none}
.paw-layer.press .paw-hand{filter:drop-shadow(0 6px 9px rgba(0,0,0,.5)) brightness(1.06)}
body.no-paw .paw-layer{display:none}

/* click ripple */
.ripple{
  position:fixed; z-index:59; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; pointer-events:none; opacity:0;
  border:2px solid rgba(255,255,255,.75);
}
.ripple.go{animation:rip .45s ease-out}
@keyframes rip{
  0%{opacity:.85; transform:scale(.3)}
  100%{opacity:0; transform:scale(3.6)}
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:80;
  transform:translate(-50%,20px);
  padding:11px 20px; border-radius:999px;
  background:rgba(16,14,12,.86);
  border:1px solid rgba(255,255,255,.12);
  color:#f6efe4; font-size:14px;
  backdrop-filter:blur(12px);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  max-width:min(86vw,420px); text-align:center;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

.noscript{
  position:fixed; inset:0; display:grid; place-items:center;
  color:#fff; font-size:18px; background:#000c; z-index:200;
}

@media (prefers-reduced-motion:reduce){
  .rig{transition:none}
  .smoke{display:none}
}