/* =========================================================================
   Cinematic hero scroll scene
   Five-stage image sequence:
   1. left panel: apartment renovation before
   2. right panel: the finished living room
   3. detail: modern bedroom
   4. detail: renovated bathroom
   5. final right panel: finished interior entry
   ========================================================================= */
.scene { height: 330vh; position: relative; background: var(--coal); }
.viewport { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--coal); isolation: isolate; perspective: 1600px; }
.layer { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity, clip-path; }
.cinema-frame { z-index: 49; opacity: .45; background: linear-gradient(180deg, var(--coal) 0 4vh, transparent 4vh calc(100% - 4vh), var(--coal) calc(100% - 4vh) 100%); }
.stage-light { z-index: 7; opacity: .5; background: radial-gradient(ellipse at 54% 38%, rgba(255,233,203,.18), transparent 24%), radial-gradient(ellipse at 48% 48%, rgba(246,242,235,.12), transparent 18%); mix-blend-mode: screen; }
.vignette { z-index: 31; background: radial-gradient(ellipse at center, transparent 34%, rgba(52,64,74,.08) 64%, rgba(52,64,74,.42) 100%), linear-gradient(180deg, rgba(52,64,74,.2), transparent 22%, transparent 76%, rgba(52,64,74,.24)); }
.blueprint { z-index: 10; opacity: .22; background-image: linear-gradient(rgba(150,205,226,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(150,205,226,.1) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse at center, #000 0 44%, transparent 72%); }
.blueprint::before, .blueprint::after { content: ''; position: absolute; border: 1px solid rgba(147,196,219,.14); }
.blueprint::before { inset: 18% 22%; }
.blueprint::after { inset: 28% 33% 18% 37%; border-color: rgba(210,176,115,.14); }
.dust { z-index: 11; opacity: .22; filter: blur(.4px); background: radial-gradient(circle at 24% 28%, rgba(234,220,192,.12), transparent 15%), radial-gradient(circle at 72% 30%, rgba(234,220,192,.08), transparent 18%), radial-gradient(circle at 48% 70%, rgba(234,220,192,.08), transparent 23%); }
.measurement { z-index: 13; opacity: .24; background: linear-gradient(90deg, transparent 12%, rgba(240,201,131,.34) 12% 12.08%, transparent 12.2% 88%, rgba(240,201,131,.34) 88% 88.08%, transparent 88.2%), linear-gradient(180deg, transparent 19%, rgba(240,201,131,.22) 19% 19.08%, transparent 19.16% 82%, rgba(240,201,131,.18) 82% 82.08%, transparent 82.16%); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.floor-plan { z-index: 12; opacity: .2; background: radial-gradient(circle at 52% 50%, transparent 0 16%, rgba(137,188,210,.14) 16.2% 16.4%, transparent 16.6%), linear-gradient(90deg, transparent 30%, rgba(137,188,210,.18) 30.1% 30.18%, transparent 30.28% 70%, rgba(137,188,210,.16) 70.1% 70.18%, transparent 70.28%), linear-gradient(180deg, transparent 26%, rgba(137,188,210,.16) 26.1% 26.18%, transparent 26.28% 68%, rgba(137,188,210,.14) 68.1% 68.18%, transparent 68.28%); mask-image: radial-gradient(ellipse at center, #000 0 46%, transparent 72%); }
.portal { z-index: 14; transform: scale(.72); }
.portal::before { content: ''; position: absolute; left: 50%; top: 51%; width: min(50vw, 700px); height: min(72vh, 760px); transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.12); border-bottom: 3px solid rgba(210,176,115,.32); box-shadow: inset 0 0 90px rgba(0,0,0,.22), 0 0 80px rgba(0,0,0,.2); }
.portal::after { content: ''; position: absolute; left: 50%; top: 51%; width: min(34vw, 475px); height: min(52vh, 560px); transform: translate(-50%,-50%); border: 1px solid rgba(240,201,131,.18); box-shadow: 0 0 60px rgba(180,138,79,.1), inset 0 0 46px rgba(240,201,131,.05); }
.material { z-index: 16; opacity: .22; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 0 24%, rgba(210,176,115,.08) 24.4% 25%, transparent 25.4% 100%), radial-gradient(ellipse at 34% 54%, rgba(255,255,255,.09), transparent 34%); }
.sample-stack { position: absolute; inset: 0; z-index: 28; display: grid; opacity: 0; pointer-events: none; }
.sample { grid-area: 1 / 1; min-height: 100%; opacity: 0; background-position: center; background-size: cover; transform: scale(1.012); transition: opacity .62s ease, transform 1.05s ease; will-change: opacity, transform; }
.sample-entry { background-image: linear-gradient(180deg, rgba(255,255,255,.02), rgba(8,8,8,.1)), url('https://r-innovation.daltonio.gr/cinematic/05-finished-interior-entry.png'); }
.sample-living { background-image: linear-gradient(180deg, rgba(255,255,255,.02), rgba(8,8,8,.1)), url('https://r-innovation.daltonio.gr/cinematic/02-after-apartment-renovation.png'); }
.sample-bedroom { background-image: linear-gradient(180deg, rgba(255,255,255,.02), rgba(8,8,8,.1)), url('https://r-innovation.daltonio.gr/cinematic/05-modern-deluxe-bedroom.png'); }
.sample-bathroom { background-image: linear-gradient(180deg, rgba(255,255,255,.02), rgba(8,8,8,.1)), url('https://r-innovation.daltonio.gr/cinematic/04-modern-renovated-bathroom.png'); }
.spec-rail { display: none; }
.hero-copy { z-index: 38; display: grid; align-items: end; justify-items: start; text-align: left; padding: 0 clamp(24px, 7vw, 120px) 13vh; }
.hero-copy .inner { max-width: 760px; position: relative; }
.copy-logo { display: block; width: clamp(138px, 14vw, 176px); height: auto; margin-bottom: 24px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.28)); }
.hero-copy .inner::before { content: ''; position: absolute; left: 0; top: -34px; width: 92px; height: 2px; background: var(--ember); box-shadow: 0 0 24px rgba(240,201,131,.2); }
h1 { font-family: var(--display); font-size: clamp(42px, 6.2vw, 96px); line-height: .95; letter-spacing: 0; text-wrap: balance; font-weight: 500; text-shadow: 0 16px 54px rgba(0,0,0,.44); max-width: 12ch; }
.lead { max-width: 640px; margin: 22px 0 0; color: rgba(255,255,255,.78); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; }
.actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.bedroom-copy { z-index: 33; display: grid; align-items: center; justify-items: start; text-align: left; opacity: 0; padding: 90px clamp(24px, 8vw, 138px) 24px; }
.bedroom-copy .inner { max-width: 690px; }
.bedroom-copy .copy-logo, .transform-copy .copy-logo { margin-bottom: 20px; }
.living-copy { z-index: 33; display: grid; align-items: center; justify-items: start; text-align: left; opacity: 0; padding: 90px clamp(24px, 8vw, 138px) 24px; }
.living-copy .inner { max-width: 690px; }
.bedroom-copy h2 { max-width: 11ch; font-family: var(--display); font-size: clamp(42px, 5.5vw, 82px); line-height: .98; font-weight: 500; text-wrap: balance; }
.living-copy h2 { max-width: 11ch; font-family: var(--display); font-size: clamp(42px, 5.5vw, 82px); line-height: .98; font-weight: 500; text-wrap: balance; }
.bedroom-copy .lead { max-width: 520px; text-shadow: 0 8px 34px rgba(0,0,0,.5); }
.transform-copy { z-index: 33; display: grid; place-items: center; text-align: center; opacity: 0; padding: 110px min(30vw, 430px) 34px 22px; }
.hero-copy, .living-copy, .bedroom-copy, .transform-copy { transition: opacity .46s ease, transform .62s ease; will-change: opacity, transform; }
.transform-copy .inner { max-width: 850px; }
.transform-copy h2 { font-family: var(--display); font-size: clamp(40px, 5.7vw, 86px); line-height: .96; letter-spacing: 0; font-weight: 500; }
.hero-copy h1,
.bedroom-copy h2,
.living-copy h2,
.transform-copy h2 { max-width: 11ch; font-family: var(--display); font-size: clamp(42px, 5.5vw, 82px); line-height: .98; letter-spacing: 0; font-weight: 500; text-wrap: balance; }
.hero-copy .lead,
.bedroom-copy .lead,
.living-copy .lead,
.transform-copy .lead { max-width: 540px; margin-top: 22px; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; }
.scene-cards { display: none; }
.board-row { width: min(940px, 88vw); display: grid; grid-template-columns: 1.1fr .9fr .95fr; gap: 10px; align-items: end; }
.board { min-height: 238px; padding: 24px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(36,32,27,.42)); box-shadow: 0 24px 70px rgba(0,0,0,.24); backdrop-filter: blur(18px); transform: none; }
.board:nth-child(2) { transform: translateY(-22px); }
.board:nth-child(3) { transform: translateY(10px); }
.board svg { width: 32px; height: 32px; color: var(--bronze-2); margin-bottom: 18px; }
.board h3 { font-family: var(--display); font-size: 25px; line-height: 1.05; font-weight: 500; }
.board p { margin-top: 10px; color: rgba(255,255,255,.62); font-size: 13px; }
.scroll-note { display: none; position: absolute; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%); color: rgba(255,255,255,.5); font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.scroll-note::after { content: ''; display: block; width: 1px; height: 42px; margin: 10px auto 0; background: linear-gradient(var(--bronze-2), transparent); }

@media (max-width: 720px) {
  .scene { height: 300vh; }
  .material-strip { right: 18px; bottom: 12vh; width: 42vw; height: 46vh; }
  .bedroom-copy { align-items: end; padding: 90px 22px 13vh; }
  .bedroom-copy h2 { font-size: clamp(38px, 12vw, 58px); }
  .hero-copy h1,
  .bedroom-copy h2,
  .living-copy h2,
  .transform-copy h2 { font-size: clamp(38px, 12vw, 58px); }
  .copy-logo { width: 138px; }
  .hero-copy { padding: 0 22px 12vh; }
  .hero-copy .inner { max-width: 100%; }
  .transform-copy { place-items: end start; text-align: left; padding: 90px 45vw 12vh 22px; }
  .transform-copy h2 { font-size: clamp(34px, 10vw, 52px); }
}

@media (max-width: 620px) {
  .scene { height: 270vh; }
  .hero-copy h1 { max-width: 11ch; font-size: clamp(30px, 8.5vw, 44px); line-height: .98; }
  .living-copy { align-items: center; padding: 90px 22px 24px; }
  .living-copy .inner { max-width: 100%; }
  .hero-copy h1,
  .bedroom-copy h2,
  .living-copy h2,
  .transform-copy h2 { font-size: clamp(30px, 8.5vw, 44px); }
  .living-copy h2, .living-copy .lead { text-shadow: 0 3px 22px rgba(0,0,0,.62); }
}