/* ============================================================
   CINEMATIC SCROLL SECTION (reference: editorial dental hero)
   Scroll-scrubbed: light editorial intro → growing portrait →
   serif statement → rising dark panel → services presentation
   ============================================================ */
.cine { --cine-serif: var(--font); }
.cine__track { position: relative; height: 430vh; background: var(--paper); }
.cine__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

/* ---- light layer: intro + avatars ---- */
.cine__introwrap {
  position: absolute;
  top: 10%;
  left: 44vw;
  display: flex;
  align-items: flex-start;
  gap: 3vw;
  z-index: 2;
  will-change: transform, opacity;
}
.cine__introtext {
  max-width: 21rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-60);
}
.cine__avatars { display: flex; align-items: center; }
.cine__avatars img,
.cine__avatars span {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--paper);
  margin-left: -12px;
  background: #000;
}
.cine__avatars img:first-child { margin-left: 0; }
.cine__avatars span {
  display: grid;
  place-items: center;
  background: var(--paper-3);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
}

/* ---- light layer: statement ---- */
.cine__statement { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cine__goal {
  position: absolute;
  left: 5vw;
  top: 40%;
  font-family: var(--cine-serif);
  font-weight: 700;
  font-size: clamp(3rem, 5vw, 5.6rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  will-change: transform, opacity;
}
.cine__lines {
  position: absolute;
  left: 43vw;
  top: 26%;
  display: block;
  font-family: var(--cine-serif);
  font-weight: 700;
  font-size: clamp(2.3rem, 4vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  width: 53vw;
  will-change: transform, opacity;
}
.cine__lines .cl { display: block; overflow: hidden; }
.cine__lines .cl > span {
  display: block;
  transform: translateY(112%);
  will-change: transform;
}
.cine__about {
  position: absolute;
  left: 43vw;
  top: 78%;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: .9rem;
  pointer-events: auto;
  opacity: 0;
  will-change: transform, opacity;
}
.cine__about:hover { background: var(--blue-deep); }

/* ---- portrait (persistent element, FLIP-style morph) ---- */
.cine__portrait {
  position: absolute;
  left: -2vw;
  bottom: -9%;
  width: 45vw;
  aspect-ratio: 3712 / 4608;
  z-index: 5;
  transform-origin: 50% 50%;
  will-change: transform;
}
.cine__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

/* ---- rising dark panel ---- */
.cine__panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(to bottom, #45484c 0%, var(--night) 22%, var(--night) 100%);
  transform: translateY(101%);
  will-change: transform;
}

/* ---- dark layer ---- */
.cine__dark { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cine__slide { position: absolute; inset: 0; }
.cine__slide[data-slide="1"] { display: none; }
.cine__title {
  position: absolute;
  left: 26vw;
  bottom: 8%;
  font-family: var(--cine-serif);
  font-weight: 700;
  color: var(--paper);
  font-size: clamp(4.2rem, 8.6vw, 9.5rem);
  line-height: .96;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.cine__title .ct { display: block; overflow: hidden; padding: .18em .25em 0 0; margin: -.18em -.25em 0 0; }
.cine__title .ct--2 { margin-left: 2.6em; margin-top: -.24em; }
.cine__title em { display: block; font-style: normal; transform: translateY(112%); }
.cine__col {
  position: absolute;
  right: 4vw;
  top: 7%;
  width: 30vw;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: var(--paper);
  pointer-events: auto;
}
.cine__col > * { opacity: 0; transform: translateY(26px); }
.cine__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(246, 243, 238, .55);
}
.cine__desc { font-size: 1.02rem; line-height: 1.55; font-weight: 600; text-wrap: pretty; }
.cine__media { width: 11.5vw; min-width: 150px; aspect-ratio: 4 / 5; overflow: hidden; }
.cine__media img { width: 100%; height: 100%; object-fit: cover; }
.cine__list { list-style: none; }
.cine__list li { border-top: 1px solid rgba(246, 243, 238, .16); }
.cine__list li:last-child { border-bottom: 1px solid rgba(246, 243, 238, .16); }
.cine__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  font-size: .95rem;
  font-weight: 600;
  transition: color .25s, padding-left .3s var(--ease);
}
.cine__list a:hover { color: var(--blue-sky); padding-left: .35rem; }
.cine__list a span { color: rgba(246, 243, 238, .5); }
.cine__cta {
  align-self: flex-start;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  transition: background .3s, transform .3s var(--ease);
}
.cine__cta:hover { background: #fff; transform: translateY(-2px); }
.cine__index {
  position: absolute;
  left: 5vw;
  bottom: 7%;
  display: grid;
  gap: .35rem;
  z-index: 7;
  opacity: 0;
  pointer-events: auto;
  will-change: opacity;
}
.cine__index-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(246, 243, 238, .45);
  margin-bottom: .3rem;
}
.cine__index button {
  text-align: left;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(246, 243, 238, .4);
  transition: color .3s;
  padding: 0;
}
.cine__index button:hover { color: rgba(246, 243, 238, .75); }
.cine__index button.active { color: var(--paper); }

/* ---- static fallback (mobile + reduced motion) ---- */
.cine--static .cine__track { height: auto; }
.cine--static .cine__stage {
  position: static;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.cine--static .cine__introwrap,
.cine--static .cine__statement,
.cine--static .cine__portrait,
.cine--static .cine__dark,
.cine--static .cine__slide,
.cine--static .cine__goal,
.cine--static .cine__lines,
.cine--static .cine__title,
.cine--static .cine__col,
.cine--static .cine__about,
.cine--static .cine__index { position: static; }
.cine--static .cine__panel { display: none; }
.cine--static .cine__portrait {
  order: 0;
  width: min(78vw, 420px);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  transform: none !important;
}
.cine--static .cine__introwrap {
  order: 1;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem clamp(1.5rem, 6vw, 3rem) 0;
}
.cine--static .cine__statement {
  order: 2;
  padding: 1.5rem clamp(1.5rem, 6vw, 3rem) 3rem;
  pointer-events: auto;
}
.cine--static .cine__goal {
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  white-space: normal;
  display: block;
  margin-bottom: .5rem;
  transform: none !important;
  opacity: 1 !important;
}
.cine--static .cine__lines {
  font-size: clamp(1.7rem, 6.2vw, 2.6rem);
  width: auto;
  transform: none !important;
  opacity: 1 !important;
}
.cine--static .cine__lines .cl > span { transform: none; }
.cine--static .cine__about { opacity: 1; display: inline-flex; margin-top: 1.5rem; }
.cine--static .cine__dark {
  order: 3;
  background: var(--night);
  padding: clamp(2.5rem, 8vw, 4rem) clamp(1.5rem, 6vw, 3rem);
  display: grid;
  gap: 3.5rem;
  pointer-events: auto;
}
.cine--static .cine__slide[data-slide="1"] { display: block; }
.cine--static .cine__title {
  font-size: clamp(2.9rem, 10.5vw, 4.6rem);
  white-space: normal;
  margin-bottom: 1.4rem;
}
.cine--static .cine__title .ct--2 { margin-left: 1.2em; }
.cine--static .cine__title em { transform: none; }
.cine--static .cine__col { width: auto; max-width: none; }
.cine--static .cine__col > * { opacity: 1; transform: none; }
.cine--static .cine__media { width: min(60vw, 260px); }
.cine--static .cine__index { display: none; }