/* =========================================================
   TEMPER | Intro layer
   1. The crumpled note ("Start fresh on Monday.") on first visit
   2. Scene backgrounds: the ledge (hero) and the glass (problem)
   Markup for all of it is built by js/intro.js.
   ========================================================= */

/* ---------- 1. Intro overlay ---------- */
.intro { display: none; }

/* Black from the very first paint, before the script builds anything */
html.intro-active .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
}
/* Once built, the veil does the covering so it can dissolve */
html .intro.is-running {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.intro.is-skipping { opacity: 0; transition: opacity .38s ease; }

.intro__veil {
  position: absolute;
  inset: -4%;
  background: radial-gradient(ellipse 62% 58% at 50% 48%, #1d1d1b 0%, #0c0c0c 55%, #020202 100%);
  transition: opacity 1.1s ease, transform 1.5s var(--ease-out);
}
.intro__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .09;
}
.intro.is-dissolving .intro__veil { opacity: 0; transform: scale(1.07); }

/* The note: sized once, everything inside scales off --pw */
.intro__stage {
  --pw: min(600px, 86vw);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pw);
  height: calc(var(--pw) * .62);
  transform: translate(-50%, -50%) rotate(-1.6deg);
}
.intro__sheet,
.intro__ball { position: absolute; inset: 0; }

.intro__sheet {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.intro__stage.is-in .intro__sheet { opacity: 1; transform: none; }
.intro__sheet.is-gone { visibility: hidden; }

.intro__shadow {
  position: absolute;
  inset: 6% 3% -9%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .85), rgb(0 0 0 / .35) 60%, transparent);
  opacity: 0;
  transition: opacity .8s ease;
}
.intro__stage.is-in .intro__shadow { opacity: 1; }

.intro__paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 9% 9% 0;
  background-color: var(--paper-light);
  background-image:
    linear-gradient(rgb(206 184 140 / .2), rgb(206 184 140 / .2)),
    linear-gradient(101deg, transparent 47.4%, rgb(0 0 0 / .07) 48%, rgb(255 255 255 / .4) 48.5%, transparent 49.4%),
    linear-gradient(-3deg, transparent 51.6%, rgb(0 0 0 / .05) 52.1%, rgb(255 255 255 / .32) 52.6%, transparent 53.5%),
    radial-gradient(ellipse at 38% 32%, rgb(255 255 255 / .35), transparent 62%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgb(70 58 42 / .24)),
    var(--fiber),
    var(--noise);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 600px 600px, 220px 220px;
  color: var(--paper-ink);
  font-family: var(--font-serif);
}
.intro__label {
  display: block;
  margin-bottom: 7%;
  font-size: max(9px, calc(var(--pw) * .019));
  letter-spacing: .34em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.intro__label::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-bottom: 1.1em;
  background: currentColor;
}
.intro__text {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--pw) * .1);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--paper-ink);
}
.intro__line { position: relative; display: block; width: fit-content; }
.intro__words { position: relative; z-index: 1; }

/* Marker: swipes left to right, a little crooked, rough at the ends */
.intro__hl {
  position: absolute;
  inset: .2em -.14em .08em -.1em;
  background: var(--highlight);
  mix-blend-mode: multiply;
  clip-path: polygon(0 10%, 3% 0, 100% 4%, 98.5% 50%, 100% 100%, 2% 94%, 0 55%);
  transform: scaleX(0) rotate(-.7deg);
  transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.65, .05, .35, 1);
}
.intro__line.is-marked .intro__hl { transform: scaleX(1) rotate(-.7deg); }

/* Red pen: one quick stroke through each line */
.intro__strike {
  position: absolute;
  z-index: 2;
  left: -5%;
  top: 50%;
  width: 110%;
  height: .5em;
  margin-top: -.2em;
  overflow: visible;
}
.intro__strike path {
  fill: none;
  stroke: var(--red);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .42s cubic-bezier(.6, .1, .3, 1);
}
.intro__line.is-struck .intro__strike path { stroke-dashoffset: 0; }

.intro__foot {
  position: absolute;
  right: 9%;
  bottom: 8%;
  font-size: max(9px, calc(var(--pw) * .017));
  letter-spacing: .3em;
  color: var(--paper-muted);
}

/* Crumple mesh: clipped clones of the paper, positioned by matrix() */
.intro__ball { visibility: hidden; transform-origin: 50% 50%; }
.intro__ball.is-live { visibility: visible; }
.intro__facet {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
.intro__shade { position: absolute; inset: 0; background: #1a140c; opacity: 0; }
.intro__shade.is-light { background: #fff; }
.intro__facet.is-back .intro__paper > * { visibility: hidden; }
.intro__hullsvg { position: absolute; left: 0; top: 0; overflow: visible; }

/* Skip */
.intro__skip {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  padding: 10px 2px 6px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: none;
  color: var(--bone-dim);
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s ease, color .2s, border-color .2s;
}
.intro.show-skip .intro__skip { opacity: 1; }
.intro__skip:hover { color: var(--bone); border-color: var(--bone); }
.intro.is-dissolving .intro__skip { opacity: 0; }

/* ---------- 2a. Ledge scene (hero) ---------- */
.scene[data-scene="ledge"] { background: var(--ink); }

.ledge__stage {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
}
.ledge__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 26% at 56% 76%, rgb(236 231 221 / .08), transparent 70%),
    linear-gradient(180deg, #030303 0%, #08080a 38%, #131416 68%, #0e0e0f 80%, #0a0a0a 100%);
}
.ledge__layer { position: absolute; left: 0; right: 0; will-change: transform; }

.ledge__clouds { top: 0; height: 66%; }
.ledge__clouds svg {
  position: absolute;
  top: 0;
  left: -15%;
  width: 130%;
  height: 100%;
  animation: tp-drift 120s ease-in-out infinite alternate;
}
.ledge__clouds svg + svg { top: 8%; animation-duration: 170s; animation-direction: alternate-reverse; }
@keyframes tp-drift {
  from { transform: translate3d(-5%, 0, 0); }
  to   { transform: translate3d(5%, 0, 0); }
}

.ledge__city { bottom: 21%; height: 44%; }
.ledge__city svg { display: block; width: 100%; height: 100%; }
.ledge__win { transition: opacity 1.1s ease; }
.ledge__win.is-off { opacity: .04; }
.ledge__beacon { animation: tp-beacon 2.8s ease-in-out infinite; }
@keyframes tp-beacon {
  0%, 100% { opacity: .15; }
  8%, 16%  { opacity: .95; }
  30%      { opacity: .15; }
}

/* Dark ground below the skyline; the city sinks behind it on scroll */
.ledge__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21.5%;
  background: linear-gradient(180deg, #17181a 0%, #0f0f10 18%, #0b0b0b 60%, var(--ink) 100%);
}

/* Ledge, figure and thoughts share one box, so bubbles track the figure */
.ledge__fgwrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(58vw, 920px);
  aspect-ratio: 1000 / 600;
}
.ledge__fg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Breathing: torso swells from the seat, the hood rides on top */
.ledge__torso {
  transform-box: fill-box;
  transform-origin: 60% 100%;
  animation: tp-breathe 5s ease-in-out infinite;
}
.ledge__head-breath { animation: tp-head-breathe 5s ease-in-out infinite; }
@keyframes tp-breathe {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(1.012, 1.03); }
}
@keyframes tp-head-breathe {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-3px); }
}
/* The hood lifts, as if looking up at the city, whenever a thought comes */
.ledge__head {
  transform-box: fill-box;
  transform-origin: 72% 94%;
  transition: transform 1.6s cubic-bezier(.45, 0, .25, 1);
}
.ledge__fgwrap.is-looking .ledge__head { transform: rotate(10deg) translate(1px, -2px); }

/* Thought bubbles: black cloud, thin bone outline, letter-spaced serif */
.ledge__thought { position: absolute; inset: 0; }
.ledge__dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid rgb(236 231 221 / .35);
  border-radius: 50%;
  background: #111;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1);
}
.ledge__dot--1 { left: 57.7%; top: 38.7%; }
.ledge__dot--2 { left: 58.8%; top: 35.3%; width: 8px; height: 8px; }
.ledge__dot--3 { left: 60%; top: 31.3%; width: 11px; height: 11px; }
.ledge__bubble {
  position: absolute;
  left: 60.5%;
  bottom: 69.5%;
  padding: 24px 40px 22px;
  opacity: 0;
  transform: scale(.82) translateY(8px);
  transform-origin: 8% 100%;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .9, .3, 1.15);
}
.ledge__cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ledge__cloud path {
  fill: #111;
  stroke: rgb(236 231 221 / .35);
  stroke-width: 1px;
}
.ledge__bubble p {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone-dim);
}
.ledge__thought.is-on .ledge__dot,
.ledge__thought.is-on .ledge__bubble { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ledge__thought.is-on .ledge__bubble { transform: none; transition-delay: .7s; }
.ledge__thought.is-on .ledge__dot--2 { transition-delay: .22s; }
.ledge__thought.is-on .ledge__dot--3 { transition-delay: .44s; }
/* On the way out, the bubble goes first and the dots follow */
.ledge__thought:not(.is-on) .ledge__dot { transition-delay: .25s; }

/* Keep the left side dark for the headline */
.ledge__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(10 10 10 / .93) 0%, rgb(10 10 10 / .74) 32%, rgb(10 10 10 / .22) 62%, rgb(10 10 10 / .04) 100%),
    linear-gradient(180deg, rgb(10 10 10 / .6) 0, rgb(10 10 10 / 0) 18%);
}

/* ---------- 2b. Glass scene (problem) ---------- */
.glass__art {
  position: absolute;
  right: -13%;
  bottom: -5%;
  display: block;
  width: min(92vw, 1270px);
  height: 108%;
  opacity: .64;
  overflow: hidden;
}

.glass__hand {
  opacity: 0;
  transform: translate(10px, 45px) scale(.96);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: opacity 1s ease .2s, transform 1.4s var(--ease-out) .2s;
}
.scene.is-visible .glass__hand { opacity: 1; transform: none; }

/* A readable, subdued silhouette rather than overlapping contact pads. */
.glass__hand-soft { opacity: .5; transition: opacity .8s ease .9s; }
.scene.is-visible .glass__hand-soft { opacity: 0; }
.glass__hand-sharp { opacity: 0; transition: opacity .8s ease .8s; }
.scene.is-visible .glass__hand-sharp { opacity: .82; }
.glass__hand-detail { opacity: 0; transition: opacity .8s ease 1s; }
.scene.is-visible .glass__hand-detail { opacity: .28; }

/* Drips slide in fits and starts */
.glass__drip {
  opacity: .7;
  animation: tp-drip var(--dur, 14s) linear var(--delay, 0s) infinite;
}
@keyframes tp-drip {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: .9; }
  30%  { transform: translateY(calc(var(--fall, 300px) * .2)); }
  48%  { transform: translateY(calc(var(--fall, 300px) * .27)); }
  72%  { transform: translateY(calc(var(--fall, 300px) * .7)); opacity: .7; }
  100% { transform: translateY(var(--fall, 300px)); opacity: 0; }
}

/* Offscreen or hidden tab: freeze every loop */
.scene.is-paused,
.scene.is-paused * { animation-play-state: paused !important; }

/* ---------- Small screens ---------- */
@media (max-width: 980px) {
  .ledge__fgwrap {
    width: min(118vw, 760px);
    right: -14vw;
    opacity: .55;
  }
  /* Text runs full width here, so the thoughts stay unspoken */
  .ledge__thought { display: none; }
  .ledge__shade {
    background:
      linear-gradient(180deg, rgb(10 10 10 / .72) 0%, rgb(10 10 10 / .5) 45%, rgb(10 10 10 / .38) 100%);
  }
  .glass__art { right: -30%; width: 135vw; height: 76%; opacity: .52; }
}

@media (max-width: 680px) {
  .intro__skip { right: 20px; bottom: 18px; }
  .glass__art { right: -55%; width: 180vw; height: 62%; bottom: -2%; opacity: .48; }
}

/* ---------- Reduced motion: still frames only ---------- */
@media (prefers-reduced-motion: reduce) {
  .ledge__clouds svg,
  .ledge__beacon,
  .ledge__torso,
  .ledge__head-breath,
  .ledge__head,
  .glass__drip { animation: none !important; }
  .glass__hand,
  .glass__hand-soft,
  .glass__hand-sharp,
  .glass__hand-detail,
  .ledge__dot,
  .ledge__bubble { transition: none !important; }
}

/* Scenes occupy their own space; never sit underneath the reading column. */
.hero > .scene { left: auto; right: 0; top: 84px; bottom: 0; width: 43%; }
.hero .ledge__stage { height: 100%; min-height: 0; }
.hero .ledge__fgwrap { width: 100%; right: 0; opacity: 1; }
.problem .glass__art { inset: 0; width: 100%; height: 100%; opacity: .74; }
@media (max-width: 980px) {
  .hero > .scene { position: relative; inset: auto; width: 100%; height: 160px; margin-top: 20px; }
  .hero .ledge__fgwrap { width: 290px; right: 5%; }
}
@media (max-width: 680px) {
  .hero > .scene { height: 120px; margin-top: 16px; }
  .hero .ledge__fgwrap { width: 220px; right: 8%; }
  .problem .glass__art { inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 980px) {
  .hero .ledge__layer { transform: none !important; }
}