/* =========================================================
   CARLA PRADO — ALTA ARQUITETURA DO OLHAR
   Cinematic landing page. Photographs as architecture.
   ========================================================= */

:root{
  --ink:#1C1B1A;
  --ink-soft:#2A2826;
  --ivory:#FBF9F7;
  --linen:#F4F0EB;
  --gold:#C5A880;
  --gold-deep:#A8875C;
  --gold-pale:#E3D3B8;

  --serif:'Cormorant Garamond',serif;
  --sans:'Outfit',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --gut:clamp(1.5rem,5vw,7rem);
  --maxw:1560px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

::selection{background:var(--gold);color:var(--ink)}

/* ---------- TYPE PRIMITIVES ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.94;
  letter-spacing:-.022em;
}
.italic{font-style:italic}

.eyebrow{
  font-family:var(--sans);
  font-size:clamp(.56rem,.72vw,.68rem);
  font-weight:300;
  letter-spacing:.42em;
  text-transform:uppercase;
}

.body-lg{
  font-family:var(--serif);
  font-size:clamp(1.06rem,1.42vw,1.42rem);
  font-weight:300;
  line-height:1.78;
  letter-spacing:.004em;
}

.numeral{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  color:var(--gold);
}

/* ---------- FILM GRAIN + GLOBAL VIGNETTE ---------- */
.filmgrain{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:90;
  opacity:.5;
  mix-blend-mode:overlay;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-1.5%,1%)}
  40%{transform:translate(1%,-1.5%)}
  60%{transform:translate(-1%,-1%)}
  80%{transform:translate(1.5%,1.5%)}
  100%{transform:translate(0,0)}
}

/* ---------- CURTAIN ---------- */
.curtain{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:grid;place-items:center;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.curtain.is-open{opacity:0;visibility:hidden}
.curtain__mark{text-align:center}
.curtain__name{
  display:block;
  font-family:var(--sans);
  font-size:clamp(.7rem,1.1vw,.9rem);
  letter-spacing:.66em;
  color:var(--ivory);
  opacity:0;
  animation:markIn 1.5s var(--ease) .2s forwards;
}
.curtain__rule{
  display:block;width:min(30vw,190px);height:1px;
  margin:1.5rem auto 0;
  background:rgba(197,168,128,.22);
  overflow:hidden;
}
.curtain__rule i{
  display:block;height:100%;width:100%;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  animation:ruleIn 1.5s var(--ease) .55s forwards;
}
@keyframes markIn{to{opacity:1}}
@keyframes ruleIn{to{transform:scaleX(1)}}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:clamp(1.1rem,2.2vw,1.9rem) var(--gut);
  transition:background .6s var(--ease-soft),
             backdrop-filter .6s var(--ease-soft),
             padding .6s var(--ease-soft),
             border-color .6s;
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.is-stuck{
  background:rgba(28,27,26,.62);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:rgba(197,168,128,.13);
  padding-top:clamp(.8rem,1.4vw,1.1rem);
  padding-bottom:clamp(.8rem,1.4vw,1.1rem);
}
/* On ivory scenes the nav inverts to ink */
.nav.is-light .nav__name,
.nav.is-light .nav__sub,
.nav.is-light .nav__cta{color:var(--ink)}
.nav.is-light.is-stuck{
  background:rgba(251,249,247,.72);
  border-bottom-color:rgba(28,27,26,.09);
}
.nav.is-light .nav__cta{border-color:rgba(28,27,26,.28)}
.nav.is-light .nav__cta::before{background:var(--ink)}
.nav.is-light .nav__cta:hover{color:var(--ivory)}

.nav__brand{display:flex;flex-direction:column;gap:.34rem;line-height:1}
.nav__name{
  font-size:clamp(.66rem,.95vw,.8rem);
  letter-spacing:.44em;font-weight:300;
  transition:color .6s var(--ease-soft);
}
.nav__sub{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(.6rem,.8vw,.72rem);
  letter-spacing:.06em;
  color:var(--gold);
  transition:color .6s var(--ease-soft);
}
.nav__cta{
  position:relative;overflow:hidden;
  border:1px solid rgba(197,168,128,.4);
  padding:.72em 1.9em;
  font-size:clamp(.6rem,.78vw,.7rem);
  letter-spacing:.3em;text-transform:uppercase;
  transition:color .5s var(--ease),border-color .5s var(--ease);
  white-space:nowrap;
}
.nav__cta::before{
  content:'';position:absolute;inset:0;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .6s var(--ease);
  z-index:-1;
}
.nav__cta span{position:relative;z-index:1}
.nav__cta:hover{color:var(--ink);border-color:var(--gold)}
.nav__cta:hover::before{transform:translateY(0)}

/* ---------- SCROLL PROGRESS ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:95;
  background:transparent;
}
.progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-pale));
}

/* ---------- SCENE SHELL ---------- */
.scene{position:relative;isolation:isolate}
.scene__inner{
  position:relative;z-index:3;
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
}

/* Chapter marker */
.chapter{
  display:flex;align-items:center;gap:1.1rem;
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
.chapter__num{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  color:var(--gold);line-height:1;
}
.chapter__line{
  flex:0 0 auto;width:clamp(28px,4vw,66px);height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.chapter__label{
  font-size:clamp(.56rem,.72vw,.66rem);
  letter-spacing:.4em;text-transform:uppercase;
  color:rgba(251,249,247,.5);
}
.scene--light .chapter__label{color:rgba(28,27,26,.5)}

/* ---------- REVEAL ANIMATIONS ---------- */
.r{opacity:0;transform:translateY(34px);
   transition:opacity 1.25s var(--ease),transform 1.25s var(--ease)}
.r.in{opacity:1;transform:none}

.rl{opacity:0;transform:translateY(38px)}
.rl.in{animation:lineUp 1.35s var(--ease) forwards}
@keyframes lineUp{to{opacity:1;transform:none}}

/* Mask-wipe reveal for images */
.wipe{clip-path:inset(0 0 100% 0);
      transition:clip-path 1.6s var(--ease)}
.wipe.in{clip-path:inset(0 0 0 0)}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .r,.rl{opacity:1!important;transform:none!important}
  .wipe{clip-path:none!important}
  .filmgrain{animation:none}
}

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

/* =========================================================
   SCENE I — O PRÓLOGO
   The macro eye becomes the stage itself. Title emerges
   from the darkness of the lash line.
   ========================================================= */
.ov{
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
  background:var(--ink);
}

/* Full-bleed photographic plane */
.ov__plate{
  position:absolute;inset:-6% -4%;
  z-index:0;
  will-change:transform;
}
.ov__plate img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:64% 42%;
  transform:scale(1.06);
  animation:ovBreath 26s var(--ease-soft) infinite alternate;
  opacity:0;
  transition:opacity 2s var(--ease);
}
.is-ready .ov__plate img{opacity:1}
@keyframes ovBreath{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  100%{transform:scale(1.15) translate3d(-1.6%,-1.2%,0)}
}

/* Photograph dissolves into the page — no visible edge anywhere */
.ov__dissolve{
  position:absolute;inset:0;z-index:1;
  background:
    /* bottom: melt to ink so type has a bed */
    linear-gradient(to top,var(--ink) 0%,rgba(28,27,26,.94) 16%,
      rgba(28,27,26,.62) 36%,rgba(28,27,26,.16) 62%,transparent 82%),
    /* left: type side darkened */
    linear-gradient(to right,rgba(28,27,26,.9) 0%,rgba(28,27,26,.42) 28%,
      transparent 58%),
    /* top: nav bed */
    linear-gradient(to bottom,rgba(28,27,26,.72) 0%,transparent 26%),
    /* right edge seal */
    linear-gradient(to left,rgba(28,27,26,.5) 0%,transparent 22%);
}
/* Soft gold light bloom, as if the ring light were off-frame */
.ov__breath{
  position:absolute;z-index:2;
  right:-8%;top:24%;
  width:min(60vw,720px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(197,168,128,.16) 0%,
    rgba(197,168,128,.06) 38%,transparent 70%);
  filter:blur(22px);
  animation:bloom 12s var(--ease-soft) infinite alternate;
  pointer-events:none;
}
@keyframes bloom{
  0%{opacity:.55;transform:scale(.94)}
  100%{opacity:1;transform:scale(1.08)}
}

.ov__type{
  position:relative;z-index:4;
  max-width:var(--maxw);
  margin-inline:auto;width:100%;
  padding:0 var(--gut) clamp(5.5rem,13vh,10rem);
}

.ov__eyebrow{
  display:flex;align-items:center;gap:.9rem;
  color:rgba(251,249,247,.62);
  margin-bottom:clamp(1.5rem,3.4vw,2.8rem);
  opacity:0;
}
.ov__eyebrow i{
  width:clamp(26px,4vw,54px);height:1px;
  background:var(--gold);flex:0 0 auto;
  transform:scaleX(0);transform-origin:left;
}
.is-ready .ov__eyebrow{animation:fadeIn 1.4s var(--ease) 1.05s forwards}
.is-ready .ov__eyebrow i{animation:ruleIn 1.2s var(--ease) 1.4s forwards}
@keyframes fadeIn{to{opacity:1}}

.ov__title{
  font-size:clamp(3.1rem,10.4vw,10.6rem);
  max-width:19ch;
}
.ov__ln{display:block;overflow:hidden;padding-bottom:.06em}
.ov__ln>span,.ov__ln>em{
  display:block;
  transform:translateY(112%);
  transition:transform 1.7s var(--ease);
}
.is-ready .ov__ln>span,.is-ready .ov__ln>em{transform:translateY(0)}
.is-ready .ov__ln:nth-child(1)>*{transition-delay:1.15s}
.is-ready .ov__ln:nth-child(2)>*{transition-delay:1.32s}
.is-ready .ov__ln:nth-child(3)>*{transition-delay:1.55s}
.ov__ln--em em{
  color:var(--gold);
  font-weight:400;
}

/* Enter link — a line that draws itself */
.ov__enter{
  display:inline-flex;flex-direction:column;gap:.85rem;
  margin-top:clamp(2.4rem,5vh,4rem);
  opacity:0;
}
.is-ready .ov__enter{animation:fadeIn 1.5s var(--ease) 2.1s forwards}
.ov__enter-label{
  font-size:clamp(.62rem,.82vw,.74rem);
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(251,249,247,.9);
  transition:color .5s var(--ease);
}
.ov__enter-line{
  display:block;height:1px;width:clamp(120px,15vw,210px);
  background:rgba(251,249,247,.2);overflow:hidden;
}
.ov__enter-line i{
  display:block;height:100%;width:100%;
  background:var(--gold);
  transform:translateX(-101%);
  transition:transform 1s var(--ease);
}
.ov__enter:hover .ov__enter-label{color:var(--gold)}
.ov__enter:hover .ov__enter-line i{transform:translateX(0)}

/* Scroll cue */
.ov__scroll{
  position:absolute;z-index:5;
  right:var(--gut);bottom:clamp(2rem,5vh,3.4rem);
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  opacity:0;
}
.is-ready .ov__scroll{animation:fadeIn 1.4s var(--ease) 2.5s forwards}
.ov__scroll span{
  font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(251,249,247,.42);
  writing-mode:vertical-rl;
}
.ov__scroll i{
  width:1px;height:clamp(46px,7vh,74px);
  background:linear-gradient(to bottom,var(--gold),transparent);
  position:relative;overflow:hidden;
}
.ov__scroll i::after{
  content:'';position:absolute;left:0;top:0;
  width:100%;height:34%;
  background:var(--ivory);
  animation:scrollRun 2.6s var(--ease-soft) infinite;
}
@keyframes scrollRun{
  0%{transform:translateY(-100%);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(300%);opacity:0}
}

@media (max-width:760px){
  .ov__plate img{object-position:66% 40%}
  .ov__scroll{display:none}
  .ov__title{max-width:14ch}
}

/* =========================================================
   SCENE II — O MANIFESTO
   Ivory chapter. The portrait is not placed on the page —
   it bleeds in from the right and evaporates into it.
   ========================================================= */
.mf{
  position:relative;
  background:var(--ivory);
  color:var(--ink);
  padding-block:clamp(7rem,17vh,13rem) clamp(6rem,13vh,10rem);
  overflow:hidden;
}
/* Seam with Scene I: ink bleeds down into the ivory */
.mf::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:clamp(90px,16vh,190px);z-index:2;
  background:linear-gradient(to bottom,var(--ink) 0%,
    rgba(28,27,26,.55) 34%,rgba(251,249,247,0) 100%);
  pointer-events:none;
}

.mf__figure{
  position:absolute;z-index:1;
  right:clamp(-14vw,-4vw,0px);
  bottom:0;
  width:clamp(340px,47vw,760px);
  will-change:transform;
  pointer-events:none;
}
.mf__figure img{
  width:100%;height:auto;
  /* second mask: dissolve the bottom into the page floor */
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 97%),
                     linear-gradient(to left,#000 62%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 52%,transparent 97%),
             linear-gradient(to left,#000 62%,transparent 99%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  mix-blend-mode:multiply;
  opacity:.94;
}
/* A breath of gold behind her, echoing the tweezers */
.mf__veil{
  position:absolute;z-index:0;
  right:2%;bottom:8%;
  width:min(52vw,620px);aspect-ratio:1;
  background:radial-gradient(circle at 60% 50%,
    rgba(197,168,128,.2) 0%,rgba(197,168,128,.07) 42%,transparent 72%);
  filter:blur(30px);
  pointer-events:none;
}

.mf__inner{position:relative;z-index:3}

.mf__title{
  font-size:clamp(2.35rem,6.3vw,6.1rem);
  max-width:20ch;
  margin-bottom:clamp(1.8rem,3.6vw,2.9rem);
}
.mf__title em{color:var(--gold-deep)}

.mf__lede{
  max-width:38ch;
  color:rgba(28,27,26,.8);
}
.mf__sign{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(28,27,26,.44);
}
.mf__sign span{color:var(--gold-deep)}

/* ---------- PILLARS (hairlines, never cards) ---------- */
.pillars{
  margin-top:clamp(4.5rem,10vh,8rem);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:1120px;
}
.pillar{
  position:relative;
  padding:clamp(1.9rem,3.4vw,2.9rem) clamp(1.4rem,2.6vw,2.6rem);
  padding-left:0;
}
.pillar+.pillar{padding-left:clamp(1.5rem,3vw,3rem)}
/* the only division is a hairline that grows on reveal */
.pillar+.pillar::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,
    rgba(28,27,26,.16) 18%,rgba(28,27,26,.16) 82%,transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s var(--ease) .25s;
}
.pillar.in+.pillar::before,
.pillar+.pillar.in::before{transform:scaleY(1)}

.pillar__num{
  display:block;
  font-size:clamp(.92rem,1.2vw,1.08rem);
  letter-spacing:.1em;
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
.pillar__t{
  font-size:clamp(1.45rem,2.5vw,2.15rem);
  margin-bottom:.75rem;
  letter-spacing:-.01em;
}
.pillar__d{
  font-size:clamp(.84rem,1.02vw,.95rem);
  line-height:1.85;
  color:rgba(28,27,26,.66);
  max-width:30ch;
}

@media (max-width:980px){
  .pillars{grid-template-columns:1fr;max-width:46ch}
  .pillar{padding:clamp(1.5rem,4vw,2.2rem) 0!important}
  .pillar+.pillar::before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(to right,rgba(28,27,26,.16),transparent 78%);
    transform:scaleX(0);transform-origin:left;
  }
  .pillar.in+.pillar::before,
  .pillar+.pillar.in::before{transform:scaleX(1)}
  .pillar__d{max-width:none}
}
@media (max-width:760px){
  .mf__figure{
    width:min(96vw,520px);
    right:-16vw;bottom:auto;top:clamp(-2rem,-4vw,0rem);
    opacity:.3;
  }
  .mf__title,.mf__lede{position:relative;z-index:3}
}

/* =========================================================
   SCENE III — A ALTA CURADORIA
   Return to ink. Counter-shot of Scene II: the gesture enters
   from the left wall and evaporates; the type answers from
   the right. Four movements, divided only by hairlines.
   ========================================================= */
.cu{
  position:relative;
  background:var(--ink);
  color:var(--ivory);
  padding-block:clamp(7rem,18vh,14rem) clamp(7rem,16vh,12rem);
  overflow:hidden;
}
/* Seam with Scene II: the ivory page melts down into the ink */
.cu::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:clamp(90px,16vh,190px);z-index:2;
  background:linear-gradient(to bottom,var(--ivory) 0%,
    rgba(251,249,247,.5) 32%,rgba(28,27,26,0) 100%);
  pointer-events:none;
}

/* The photographic wall — full-bleed from the left edge.
   No transform here: the parallax engine owns it. */
.cu__plate{
  position:absolute;z-index:1;
  left:0;top:0;bottom:0;
  width:clamp(300px,44vw,660px);
  display:grid;align-items:center;
  will-change:transform;
  pointer-events:none;
}
/* Centred without transform — the parallax engine owns .cu__plate's */
.cu__frame{
  position:relative;
  width:100%;
  height:min(82vh,860px);
}
.cu__frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:56% 34%;
  /* dissolve into the ink: right edge toward the type, and both
     horizons — the photograph has no border anywhere */
  -webkit-mask-image:linear-gradient(to right,#000 52%,transparent 99%),
                     linear-gradient(to bottom,transparent 0%,#000 16%,
                       #000 78%,transparent 100%);
  mask-image:linear-gradient(to right,#000 52%,transparent 99%),
             linear-gradient(to bottom,transparent 0%,#000 16%,
               #000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  /* the source frame is very low-key: lift it so the gesture reads */
  filter:brightness(1.34) contrast(1.02) saturate(.9);
}
/* The ring light, off-frame — reuses the Scene I bloom */
.cu__halo{
  position:absolute;z-index:0;
  left:-6%;top:22%;
  width:min(50vw,640px);aspect-ratio:1;
  background:radial-gradient(circle at 55% 45%,rgba(197,168,128,.14) 0%,
    rgba(197,168,128,.05) 40%,transparent 72%);
  filter:blur(28px);
  animation:bloom 14s var(--ease-soft) infinite alternate;
  pointer-events:none;
}

/* Vertical plate caption, in the margin */
.cu__note{
  position:absolute;z-index:4;
  left:clamp(.9rem,2.2vw,2.2rem);
  bottom:clamp(4rem,12vh,9rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.cu__note i{
  width:1px;height:clamp(40px,7vh,72px);
  background:linear-gradient(to bottom,transparent,var(--gold));
}
.cu__note span{
  font-size:.56rem;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(251,249,247,.34);
  writing-mode:vertical-rl;
}

/* Editorial column, held to the right half of the centred grid */
.cu__inner{position:relative;z-index:3}
.cu__type{
  margin-left:auto;
  width:min(100%,clamp(380px,48vw,680px));
}
.cu__title{
  font-size:clamp(2.05rem,3.9vw,4.05rem);
  max-width:24ch;
  margin-bottom:clamp(1.7rem,3.4vw,2.7rem);
}
.cu__title em{color:var(--gold)}
.cu__lede{
  max-width:40ch;
  color:rgba(251,249,247,.72);
}

/* ---------- FOUR MOVEMENTS (hairlines, never cards) ---------- */
.movements{
  list-style:none;
  margin-top:clamp(3.2rem,8vh,5.5rem);
}
.mv{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.1rem,2.4vw,2.2rem);
  padding-block:clamp(1.5rem,3.2vw,2.3rem);
}
.mv+.mv::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(to right,rgba(197,168,128,.26) 0%,
    rgba(251,249,247,.1) 42%,transparent 88%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease) .2s;
}
.mv.in+.mv::before,
.mv+.mv.in::before{transform:scaleX(1)}

.mv__n{
  font-size:clamp(.88rem,1.15vw,1.04rem);
  letter-spacing:.1em;
  line-height:1.9;
}
.mv__t{
  font-size:clamp(1.32rem,2.2vw,1.85rem);
  letter-spacing:-.01em;
  margin-bottom:.5rem;
}
.mv__d{
  font-size:clamp(.84rem,1.02vw,.95rem);
  line-height:1.85;
  color:rgba(251,249,247,.6);
  max-width:42ch;
}

.cu__sign{
  margin-top:clamp(2.2rem,5vh,3.6rem);
  color:rgba(251,249,247,.38);
}
.cu__sign span{color:var(--gold)}

/* The photograph becomes a full-width band above the type */
@media (max-width:1024px){
  .cu{padding-block:clamp(5.5rem,14vh,9rem) clamp(5rem,12vh,8rem)}
  .cu__plate{
    position:relative;
    left:auto;top:auto;bottom:auto;
    width:100%;
    margin-bottom:clamp(2.8rem,7vh,4.5rem);
  }
  /* Honour the source ratio — a panoramic band would amputate the gesture.
     Width is sized in vh so the resulting height always shares the screen
     with the type, and object-fit never has to crop. */
  .cu__frame{
    width:min(100%,56vh);
    height:auto;
    aspect-ratio:1083/1216;
    margin-inline:auto;
  }
  .cu__frame img{
    object-position:50% 42%;
    filter:brightness(1.16) contrast(1.02) saturate(.9);
    /* centred plate: both vertical edges dissolve into the ink */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 13%,
                         #000 87%,transparent 100%),
                       linear-gradient(to bottom,transparent 0%,#000 13%,
                         #000 80%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 13%,
                 #000 87%,transparent 100%),
               linear-gradient(to bottom,transparent 0%,#000 13%,
                 #000 80%,transparent 100%);
  }
  .cu__halo{top:6%;left:-14%}
  .cu__note{display:none}
  .cu__type{margin-left:0;width:100%}
  .cu__lede,.mv__d{max-width:52ch}
}
@media (max-width:760px){
  .cu__frame{width:min(100%,48vh)}
  .cu__title{max-width:none}
}

/* =========================================================
   SCENE IV — A TRANSFORMAÇÃO
   Ivory chapter. One photograph revealed beneath the other
   by the seam engine already in script.js (--seam on #seamStage).
   ========================================================= */
.tf{
  position:relative;
  background:var(--ivory);
  color:var(--ink);
  padding-block:clamp(7rem,17vh,13rem) clamp(6rem,14vh,11rem);
  overflow:hidden;
}
/* Seam with Scene III: the ink bleeds down into the ivory */
.tf::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:clamp(90px,16vh,190px);z-index:2;
  background:linear-gradient(to bottom,var(--ink) 0%,
    rgba(28,27,26,.55) 34%,rgba(251,249,247,0) 100%);
  pointer-events:none;
}
.tf__inner{position:relative;z-index:3}

.tf__title{
  font-size:clamp(2.35rem,6.3vw,6.1rem);
  max-width:20ch;
  margin-bottom:clamp(1.8rem,3.6vw,2.9rem);
}
.tf__title em{color:var(--gold-deep)}
.tf__lede{
  max-width:38ch;
  color:rgba(28,27,26,.8);
}

/* ---------- THE STAGE ---------- */
.tf__stage{margin-top:clamp(4rem,9vh,7rem)}
.stage{
  --seam:50%;
  position:relative;
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  /* the sources are tall portraits: a wider ratio would clip the brow */
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--linen);
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.stage__pane{position:absolute;inset:0}
.stage__pane img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 46%;
}
/* BEFORE sits beneath; AFTER is clipped to the seam */
.stage__pane--after{clip-path:inset(0 0 0 var(--seam))}
.stage__pane--before{clip-path:inset(0 calc(100% - var(--seam)) 0 0)}

/* The seam itself — a hairline of light */
.stage__seam{
  position:absolute;top:0;bottom:0;
  left:var(--seam);
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--gold-pale) 12%,
    var(--gold) 50%,var(--gold-pale) 88%,transparent);
  z-index:4;
  pointer-events:none;
}

/* Grip — the only interactive furniture */
.stage__grip{
  position:absolute;top:50%;left:var(--seam);
  width:clamp(46px,4.4vw,60px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:5;
  display:grid;place-items:center;
  border:1px solid rgba(251,249,247,.5);
  border-radius:50%;
  background:rgba(28,27,26,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:ew-resize;
  transition:background .5s var(--ease),border-color .5s var(--ease),
             transform .5s var(--ease);
}
.stage__grip i{
  display:block;
  width:clamp(13px,1.3vw,17px);height:1px;
  background:var(--ivory);
  position:relative;
}
/* two arrowheads, drawn from the same hairline */
.stage__grip i::before,
.stage__grip i::after{
  content:'';position:absolute;top:50%;
  width:6px;height:6px;
  border-top:1px solid var(--ivory);
  border-left:1px solid var(--ivory);
}
.stage__grip i::before{left:-1px;transform:translateY(-50%) rotate(-45deg)}
.stage__grip i::after{right:-1px;transform:translateY(-50%) rotate(135deg)}

.stage__grip:hover,
.stage__grip:focus-visible{
  background:rgba(28,27,26,.4);
  border-color:var(--gold);
  outline:none;
}
.stage.is-dragging .stage__grip{transform:translate(-50%,-50%) scale(.92)}
/* While the engine performs its opening sweep, hold the grip quiet */
.stage.is-armed .stage__grip{transition:none}

/* Labels */
.stage__label{
  position:absolute;bottom:clamp(1rem,2.4vw,1.9rem);
  z-index:4;
  font-size:.56rem;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(251,249,247,.86);
  pointer-events:none;
  text-shadow:0 1px 12px rgba(28,27,26,.55);
}
.stage__label--before{left:clamp(1rem,2.4vw,1.9rem)}
.stage__label--after{right:clamp(1rem,2.4vw,1.9rem)}

.tf__cap{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  text-align:center;
  color:rgba(28,27,26,.44);
}
.tf__cap span{color:var(--gold-deep)}

@media (max-width:760px){
  .stage{aspect-ratio:4/5;max-width:none}
  .tf__lede{max-width:none}
}