/* ============================================================
   v4 «SEGUNDA MANO EN LA PERLA» — the hero journey
   Bodega Retro tokens are inherited from index.html :root
   ============================================================ */

#perla{position:relative}
#perla .perla-pin{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:#0a0705;                     /* space, and the M4 destination */
}

/* One stage rect shared by video, canvas and sketch.
   JS sizes it to a focal-point "cover" rectangle so all three layers are in
   exact register at every viewport. CSS object-fit cannot do this, because the
   oyster sits left of centre and a plain centre-crop loses it on portrait. */
#perla .perla-stage{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
#perla .perla-stage > *{position:absolute;inset:0;width:100%;height:100%;display:block}
#perla video{object-fit:fill;background:#0a0705}
/* The video is NEVER hidden and never paused: it is the live background the
   canvas covers. The canvas appears as a HARD, untransitioned cut — and only
   once JS confirms a frame was actually painted AND the scrub has advanced past
   frame 0 (class .is-scrubbing). Both halves are load-bearing:
   - ctx is alpha:false, so a canvas shown before its first drawImage paints
     solid black. That WAS the black flash: the old rule keyed visibility off
     the state class and faded 0->1 over .12s while the video hid instantly.
   - at frame 0 the journey shows nothing the loop doesn't already show, so the
     live loop plays instead of a frozen f0000 (Paul: "I would rather the
     background keep playing"). */
#perla canvas{opacity:0}
#perla.is-scrubbing canvas{opacity:1}

/* --- the load-bearing scrim.
   Michroma's thin even strokes get eaten by foam and specular highlights.
   Always present, never reactive to the video; a drop shadow is not a
   substitute and goes muddy against water texture. --- */
#perla .perla-scrim{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(180deg, rgba(62,43,35,.44) 0%, rgba(62,43,35,.16) 42%, rgba(62,43,35,0) 62%),
    linear-gradient(90deg, rgba(62,43,35,.30) 0%, rgba(62,43,35,0) 55%);
  transition:opacity .5s ease;
}
#perla.is-journey .perla-scrim{opacity:0}

#perla .perla-grain{
  position:absolute;inset:0;pointer-events:none;z-index:9;
  opacity:.07;background-image:var(--grain);mix-blend-mode:overlay;
}

/* ---------------- M1 — the title ----------------
   THE TITLE NEVER LEAVES THE SCREEN (Paul, 2026-08-15): it is what tells you
   you are still on the website while the journey scrubs past. It used to fade
   out on the first scroll, which left ~4,000 px of scroll with nothing on
   screen identifying the site.

   So it RETIRES rather than exits: the hero lockup shrinks to a compact
   wordmark plate and stays there for the whole journey. The plate is not
   decoration — the title has to survive a beach, black space, a satellite
   plate and a cream vector map inside twelve seconds, and cream-on-cream over
   the map leg is invisible without it. It reuses the site's existing answer to
   text-over-unpredictable-artwork (.stitle.plate: tinta ground, mango edge). */
#perla .perla-title{
  position:absolute;z-index:6;left:clamp(1.2rem,5vw,4rem);top:clamp(4.6rem,14vh,8rem);
  max-width:min(60ch,62vw);
  opacity:0;transform:translateY(11px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1),
             top .8s cubic-bezier(.22,.61,.36,1), padding .8s ease,
             background-color .8s ease, border-left-width .8s ease;
  border-left:0 solid var(--mango);
}
#perla.is-titled .perla-title{opacity:1;transform:none}
/* retired state — smaller, plated, and still on screen */
#perla.is-settling .perla-title,#perla.is-journey .perla-title{
  opacity:1;transform:none;
  top:clamp(3.9rem,8.5vh,5.4rem);
  padding:.5rem .8rem .55rem;
  background:rgba(62,43,35,.82);
  border-left-width:3px;
  backdrop-filter:blur(3px);
}
#perla .perla-title h1{
  font-family:var(--font-display);text-transform:uppercase;color:var(--crema);
  font-size:clamp(28px,5.2vw,68px);line-height:1.02;letter-spacing:.03em;font-weight:400;
  transition:font-size .8s cubic-bezier(.22,.61,.36,1),letter-spacing .8s ease;
}
#perla.is-settling .perla-title h1,#perla.is-journey .perla-title h1{
  font-size:clamp(13px,1.45vw,18px);line-height:1.28;letter-spacing:.1em;
}
/* the product-category line: the spectacle must read as branded content,
   not a mystery box, inside two seconds. Unlike the title this DOES retire —
   it is a one-time statement, and it is the line that would go unreadable at
   wordmark size. */
#perla .perla-sub{
  margin-top:1rem;max-width:34ch;color:var(--crema);opacity:.92;
  font-size:clamp(14px,1.5vw,19px);line-height:1.35;
  transition:opacity .45s ease,max-height .8s ease,margin-top .8s ease;
  max-height:8rem;overflow:hidden;
}
#perla.is-settling .perla-sub,#perla.is-journey .perla-sub{
  opacity:0;max-height:0;margin-top:0;
}

/* ---------------- persistent escape hatch ----------------
   the difference between spectacle-first and spectacle-forced */
#perla .perla-skip{
  position:absolute;z-index:7;right:clamp(1.2rem,5vw,4rem);bottom:clamp(1.4rem,5vh,3rem);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;
  color:var(--crema);text-decoration:none;padding:.7rem .95rem;
  border:1.5px solid rgba(245,235,216,.55);border-radius:2px;
  background:rgba(62,43,35,.42);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s ease,color .15s,border-color .15s;
}
#perla.is-titled .perla-skip{opacity:1}
#perla .perla-skip:hover{color:var(--mango);border-color:var(--mango)}

/* ---------------- M2 — the sketch layer ----------------
   The circle around the shell is removed (Paul, 2026-08-15). Only the scroll
   affordance is drawn here now, so the draw-on/undraw dasharray machinery and
   the mask that carried it are gone with it. */
#perla .perla-sketch{z-index:5;pointer-events:none;overflow:visible}
/* WEIGHTS RAISED with the circle's removal. The affordance used to be half of a
   two-part annotation — a circle round the shell plus an arrow — and the circle
   carried the reading. Alone, the arrow at the old weights is invisible: shot
   headless at 1440x860 over the sunlit sand it could not be found at all, and only
   showed up when forced to pure red. An affordance nobody can see is the same
   accessibility failure this layer exists to prevent, so the arrow now carries
   itself. Same palette, same hand-drawn character, more weight. */
#perla .perla-sketch .ink{
  fill:none;stroke:rgba(62,43,35,.95);stroke-width:4.5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
/* a cream underlay so tinta café survives the darker wet sand without changing
   the palette — legibility fix, not a colour change */
#perla .perla-sketch .halo{
  fill:none;stroke:rgba(245,235,216,.72);stroke-width:11;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

#perla .perla-arrow{opacity:0;transition:opacity .45s ease .9s}
#perla.is-sketched .perla-arrow{opacity:1;animation:perla-bob 5.2s ease-out .9s infinite}
#perla.is-settling .perla-arrow,#perla.is-journey .perla-arrow{
  opacity:0;animation:none;transition:opacity .2s ease;
}
/* two free-decay bounces, then a long settle. An identical loop reads as a
   spinner; a real bounce loses energy. */
@keyframes perla-bob{
  0%{transform:translateY(0)}      6%{transform:translateY(8px)}
  12%{transform:translateY(0)}     17%{transform:translateY(3.4px)}
  22%{transform:translateY(0)}     100%{transform:translateY(0)}
}
#perla .perla-scrolltext{
  font-family:var(--font-serif);font-style:italic;font-size:22px;
  fill:rgba(62,43,35,1);letter-spacing:.02em;
  paint-order:stroke fill;stroke:rgba(245,235,216,.72);stroke-width:5;
  stroke-linejoin:round;
}

/* ---------------- reduced motion / fallback ----------------
   The ambient water loop is not a vestibular trigger and may keep playing,
   but the title and CTA must render immediately and the CTA must be reachable
   from a static anchor — otherwise a mandatory scroll journey is an
   accessibility failure, not merely a UX one. */
/* The static path means "the LOOP did not arrive", not "there is nothing to
   look at": the poster still shows the oyster, so the scroll affordance must
   stay. Hiding the sketch here removed the only cue telling the visitor the
   page goes anywhere — an accessibility failure dressed as a fallback.
   Only the scrubbed canvas is dropped, because there is no journey to scrub. */
#perla.is-static .perla-stage > canvas{display:none}

@media (prefers-reduced-motion:reduce){
  #perla .perla-title{transition-duration:.18s;transform:none}
  #perla.is-titled .perla-title{transform:none}
  #perla .perla-arrow{animation:none!important;opacity:1}
  #perla .perla-skip{transition:none}
}

@media (max-width:767px){
  #perla .perla-title{top:clamp(4.2rem,12vh,6rem);max-width:88vw}
  #perla .perla-sub{max-width:30ch}
}