/* ============================================================
   Interactive desk objects — Second Bell Studio
   A small family of cut-out props from the hero desk that come
   alive on hover / scroll. Same mahogany, same lamp — so a prop
   dropped into a light section still feels lit by the hero.
   ============================================================ */

:root {
  --obj-ease: cubic-bezier(.2,.85,.25,1);
  /* a spring curve: rises past 1 to ~1.066 (the overshoot), then settles.
     Used by the prop lifts and the "boop" so they share one spring feel. */
  --spring: linear(0, .006, .025 2.8%, .101 6.5%, .539 22%, .721 30%, .84, .925, .99, 1.04, 1.06, 1.066, 1.058, 1.04 75%, 1.005, .985, .998, 1);
}

/* ---------- shared interactive prop ---------- */
.obj {
  position: relative; display: inline-block; border: 0; background: none;
  padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none;
}
.obj .art {
  position: relative; display: block; width: 100%;
  transition: transform .55s var(--spring), filter .55s var(--obj-ease);
  will-change: transform; transform-origin: 50% 62%;
}
.obj .art img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* soft contact shadow that spreads as the prop lifts off the desk */
.obj::before {
  content: ""; position: absolute; left: 50%; bottom: 3%; width: 60%; height: 14%;
  transform: translate(-50%, 40%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  filter: blur(7px); opacity: .75; z-index: -1;
  transition: transform .55s var(--spring), opacity .55s var(--obj-ease);
}
.obj:hover::before, .obj:focus-within::before, .obj.active::before {
  transform: translate(-50%, 72%) scale(1.22, 1.08); opacity: .5;
}
.obj:focus-visible { outline: 2px solid rgba(227,184,100,.9); outline-offset: 10px; border-radius: 14px; }

/* generic lift for a prop without a bespoke move */
.obj:hover .art, .obj:focus-within .art, .obj.active .art { transform: translateY(-9px) scale(1.035); }

/* a prop pinned by its centre (left/top = centre point) */
.obj.pin { position: absolute; transform: translate(-50%, -50%); }

/* a small handwritten label a prop can reveal */
.prop-note {
  position: absolute; pointer-events: none; opacity: 0; transform: translateY(8px) scale(.97);
  transition: opacity .45s var(--obj-ease), transform .45s var(--obj-ease); z-index: 6; white-space: nowrap;
  font-family: var(--hand); color: var(--on-wood); font-weight: 600; line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.obj:hover .prop-note, .obj:focus-within .prop-note, .obj.active .prop-note { opacity: 1; transform: none; }

/* ============================================================
   HERO — the live desk
   The desk photo + apple ride a fixed-aspect stage that is
   cover-scaled to the viewport, so the apple tracks its spot
   on the photo at every size.
   ============================================================ */
.hero-stage {
  position: absolute; left: 51%; top: 50%; width: 1600px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--hs, 1)); transform-origin: center center;
  z-index: 0; pointer-events: none;
}
.hero-scene { position: absolute; inset: 0; will-change: transform; }
.hero-desk { position: absolute; inset: 0; background: url("../assets/desk-hero.jpg") center / cover no-repeat; }
.hero-scene .obj { pointer-events: auto; }
.hero-scrim, .hero-vignette { pointer-events: none; }

/* hide the legacy <img> background if it lingers */
.hero-photo { display: none; }

/* ---- apple: take a bite ----
   The apple uses a smooth settle (not the springy --spring overshoot the
   other props share) so the bite reads as a gentle lift, not a levitating
   bounce. Its contact shadow eases the same way for a single, calm motion. */
.hero-apple { width: 8.4%; left: 90.4%; top: 41%; z-index: 2; }
.hero-apple .art { transform-origin: 50% 78%; filter: brightness(.9) contrast(1.04) saturate(1.02);
  transition: transform .42s var(--obj-ease), filter .42s var(--obj-ease); }
.hero-apple::before { transition: transform .42s var(--obj-ease), opacity .42s var(--obj-ease); }
.hero-apple .whole { position: relative; display: block; width: 100%; }
.hero-apple .bitten { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .42s var(--obj-ease); }
.hero-apple:hover .whole, .hero-apple:focus-within .whole, .hero-apple.active .whole { opacity: 0; }
.hero-apple:hover .bitten, .hero-apple:focus-within .bitten, .hero-apple.active .bitten { opacity: 1; }
.hero-apple:hover .art, .hero-apple:focus-within .art, .hero-apple.active .art {
  transform: translateY(-4px) rotate(3deg) scale(1.04);
}

/* ============================================================
   The vintage brass bell — replaces the brass disc in the CTA
   (and the footer). Keeps the glowing pulse; rings on click.
   ============================================================ */
.bell-btn.bell-real {
  background: none; box-shadow: none; color: inherit;
  width: auto; height: auto; border-radius: 0; place-items: stretch;
}
.bell-btn.bell-real .bell-ico {
  position: relative; transform-origin: 50% 16%;
  filter: drop-shadow(0 10px 14px rgba(20,10,4,.55));
}
.bell-btn.bell-real .bell-ico img { display: block; width: 100%; height: auto; pointer-events: none; }
/* the kept glow: a soft golden halo + the original outward pulse ring */
.bell-btn.bell-real::after {
  content: ""; position: absolute; left: 50%; top: 52%; width: 64%; height: 60%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(227,184,100,.32), rgba(227,184,100,0) 70%);
  box-shadow: 0 0 0 0 rgba(227,184,100,.5);
  animation: bellPulse 2.6s ease-out infinite; z-index: -1; pointer-events: none;
}
.bell-btn.bell-real:hover { transform: none; }
.bell-btn.bell-real:hover .bell-ico { transform: translateY(-2px) scale(1.04); }
.bell-btn.bell-real:active .bell-ico { transform: translateY(1px) scale(.98); }
/* reuse the existing .ringing shake on the icon */

/* ============================================================
   THE RED PEN — a retractable clicky pen in the "problem" gutter.
   Rests low in the right gutter beside the body, next to the
   "That's the whole product" note + red arrow (the pen that wrote
   them). Twirls when the cursor comes near and clicks open/closed
   like a real one — two registered cutouts (nib retracted / nib out)
   cross-fade on click. See initPen in main.js.
   ============================================================ */
.deck-pen {
  position: absolute; bottom: clamp(120px, 22vw, 300px); right: clamp(8px, 5%, 96px);
  width: clamp(84px, 8.4vw, 122px); z-index: 4;
  margin: 0; padding: 0; border: 0; background: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  touch-action: manipulation; line-height: 0;
}
.deck-pen:focus { outline: none; }
.deck-pen .art { display: block; transition: none; transform-origin: 50% 50%; will-change: transform; }
.deck-pen .pen-stack { position: relative; display: block; }
.deck-pen .pen-img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 9px 11px rgba(40,18,8,.26));
  transition: opacity .09s linear;
}
.deck-pen .pen-img.open { position: absolute; inset: 0; opacity: 0; }   /* nib out, overlaid */
.deck-pen.clicked .pen-img.closed { opacity: 0; }
.deck-pen.clicked .pen-img.open { opacity: 1; }
/* a quick tactile recoil on every click — a little push toward the nib (one-shot, re-armed in JS) */
.deck-pen.press .pen-stack { animation: penPress .24s cubic-bezier(.2,.7,.2,1); }
@keyframes penPress {
  0%   { transform: translate(0,0) scale(1); }
  32%  { transform: translate(-1px, 1.8px) scale(.955); }
  100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .deck-pen .pen-img { transition: none; }
  .deck-pen.press .pen-stack { animation: none; }
}
@media (max-width: 940px), (hover: none) {
  .deck-pen { display: none; }   /* the twirl + click is a pointer-only joy */
}

/* ============================================================
   "WHAT YOU'LL BUILD" — typing laptop
   (the red pen lives up in the "problem" section — see above)
   ============================================================ */
.lanes { position: relative; }
/* heading keeps a comfortable measure; the laptop floats into the right gutter */
.build-head { position: relative; min-height: 420px; }
.build-head .sec-head { max-width: 660px; }
.build-head .sec-head h2 { font-size: clamp(30px, 4.4vw, 52px); }

/* the laptop: lamp-lit cutout floated into the right gutter, screen typing the pitch */
.deck-laptop { position: absolute; top: 128px; right: -14px; width: clamp(240px, 26vw, 320px); margin: 0; }
.deck-laptop .art { transform-origin: 50% 80%; }
.deck-laptop:hover .art, .deck-laptop:focus-within .art { transform: translateY(-6px) scale(1.018); }
.deck-laptop::before { width: 64%; height: 11%; bottom: 9%; opacity: .45; }

@media (max-width: 940px) {
  .build-head { min-height: 0; }
  .build-head .sec-head { max-width: none; }
  .deck-laptop { position: static; margin: 34px auto 6px; }
}

/* typewriter screen mapped onto the laptop lid */
.laptop-screen {
  position: absolute; left: 40.7%; top: 30%; width: 65%; height: 36%;
  transform: translate(-50%, -50%) matrix(0.9695, -0.245, 0.245, 0.9695, 0, 0);
  display: flex; align-items: center; justify-content: center; padding: 0 6%;
  background: radial-gradient(ellipse at 50% 30%, rgba(120,150,180,.12), rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.laptop-screen .screen-text {
  font-family: var(--display); font-weight: 400; color: #eaf1f7;
  font-size: clamp(10px, 1.15vw, 15px); line-height: 1.3; text-align: center; letter-spacing: .005em;
  text-shadow: 0 0 12px rgba(150,200,255,.28);
}
.laptop-screen .screen-text.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #8fd3a0; }
.laptop-screen .cursor { display: inline-block; width: .6ch; margin-left: 1px; background: var(--brass-bright); color: transparent; border-radius: 1px; animation: scrBlink 1s steps(1) infinite; }
@keyframes scrBlink { 50% { opacity: 0; } }

/* ============================================================
   "HOW IT WORKS" — coffee mug breaks the left-align
   ============================================================ */
/* mug in a narrow left column shifts the header right, breaking the left-align */
.how-head { display: grid; grid-template-columns: clamp(150px, 20vw, 230px) 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; margin-bottom: 4px; }
@media (max-width: 760px) { .how-head { grid-template-columns: minmax(120px, 180px) 1fr; gap: 22px; } }

.deck-mug { width: 100%; max-width: 220px; margin: 0 auto; position: relative; }
.deck-mug .art { transform-origin: 50% 70%; }
.deck-mug .full { position: relative; display: block; width: 100%; }
.deck-mug .empty { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .55s var(--obj-ease); }
.deck-mug:hover .full, .deck-mug:focus-within .full, .deck-mug.active .full { opacity: 0; }
.deck-mug:hover .empty, .deck-mug:focus-within .empty, .deck-mug.active .empty { opacity: 1; }
.deck-mug:hover .art, .deck-mug:focus-within .art, .deck-mug.active .art { transform: translate(-5px, -9px) rotate(-3deg) scale(1.02); }

/* rising steam */
.steam { position: absolute; left: 44%; top: -10%; width: 46%; height: 60%; pointer-events: none; opacity: .85; transition: opacity .4s; }
.deck-mug:hover .steam, .deck-mug:focus-within .steam, .deck-mug.active .steam { opacity: 0; }
.steam i { position: absolute; bottom: 0; width: 16%; height: 70%; left: var(--x); border-radius: 50%;
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,245,230,.5)); filter: blur(6px);
  opacity: 0; animation: steamRise var(--d) ease-in infinite; animation-delay: var(--dl); }
.steam i:nth-child(1) { --x: 16%; --d: 3.4s; --dl: 0s; }
.steam i:nth-child(2) { --x: 42%; --d: 3.9s; --dl: .8s; }
.steam i:nth-child(3) { --x: 66%; --d: 3.1s; --dl: 1.5s; }
@keyframes steamRise {
  0% { opacity: 0; transform: translateY(20%) scaleX(1); }
  25% { opacity: .55; } 60% { opacity: .3; }
  100% { opacity: 0; transform: translateY(-90%) translateX(-20%) scaleX(1.7); }
}

/* ============================================================
   "WHO TEACHES" — the desk-wood backdrop, a trimmer landscape
   portrait, and Chris's name badge as a prop
   ============================================================ */
.teach {
  background-color: var(--wood-850);
  background-image:
    linear-gradient(rgba(24,12,8,.62), rgba(24,12,8,.72)),
    url("../assets/objects/wood.jpg");
  background-size: cover; background-position: center;
}
.teach::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 220px 60px rgba(12,6,3,.6);
}
.teach .wrap { position: relative; z-index: 1; }
.teach-grid { grid-template-columns: minmax(280px, 360px) 1fr; align-items: center; }
@media (max-width: 820px) { .teach-grid { grid-template-columns: 1fr; } }

/* landscape, smaller, still a tacked-up print */
.portrait-frame { transform: rotate(-1.6deg); max-width: 340px; padding: 12px 12px 44px; }
.portrait-frame .slot { aspect-ratio: 16 / 9; }
.portrait-cap { bottom: 11px; font-size: 21px; }

.teach-portrait { position: relative; width: max-content; max-width: 100%; }

/* a second live apple — resting flat on the wood in the section's top-right */
.teach-apple {
  position: absolute; top: clamp(0px, 1vw, 16px); right: clamp(2px, .6vw, 12px);
  width: clamp(76px, 8vw, 106px); z-index: 4;
}
.teach-apple .art { transform-origin: 50% 80%; filter: brightness(.94) contrast(1.03) saturate(1.02);
  transition: transform .42s var(--obj-ease), filter .42s var(--obj-ease); }
.teach-apple::before { transition: transform .42s var(--obj-ease), opacity .42s var(--obj-ease); }
.teach-apple .whole { position: relative; display: block; width: 100%; }
.teach-apple .bitten { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .42s var(--obj-ease); }
.teach-apple:hover .whole, .teach-apple:focus-within .whole, .teach-apple.active .whole { opacity: 0; }
.teach-apple:hover .bitten, .teach-apple:focus-within .bitten, .teach-apple.active .bitten { opacity: 1; }
.teach-apple:hover .art, .teach-apple:focus-within .art, .teach-apple.active .art { transform: translateY(-4px) rotate(-3deg) scale(1.04); }
@media (max-width: 820px) {
  .teach-apple { width: clamp(58px, 14vw, 84px); top: 4px; right: 0; }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .steam i { animation: none; opacity: 0; }
  .bell-btn.bell-real::after { animation: none; opacity: .5; }
  .laptop-screen .cursor { animation: none; }
  .obj .art, .obj::before { transition: none; }
}