/* ============================================================
   ATLAS — CINEMA LAYER
   Apple product-film grammar: clean parallax, soft focus pulls,
   smooth masks, scripted "camera" moves. Layered ON TOP of the
   existing heritage stylesheet — opt-in via .cinema class on body.
   ============================================================ */

:root{
  /* Cinematic motion tokens — every transition uses one of these */
  --ease-cinema:  cubic-bezier(.2,.8,.2,1);    /* hero curve, default */
  --ease-glide:   cubic-bezier(.16,1,.3,1);    /* long, soft outs (focus pulls) */
  --ease-dolly:   cubic-bezier(.65,0,.35,1);   /* heavy weight, dolly moves */
  --ease-iris:    cubic-bezier(.7,0,.2,1);     /* sharp punctuation */

  --t-snap:    .35s;
  --t-cut:     .6s;
  --t-shot:    1.2s;     /* a cinema "shot" — element transitions */
  --t-scene:   1.8s;     /* a section transition */
  --t-epic:    2.6s;     /* hero entrances, intro */
}

/* ------------------------------------------------------------
   STAGE — full-bleed cinematic body
   Replaces the paper grain with a quiet vignette + film grain.
   ------------------------------------------------------------ */
body.cinema{
  background:#FBF8F2;
  overflow-x:hidden;
}
body.cinema.intro-active{
  overflow:hidden;
  height:100vh;
}

/* Kill the .paper grain overlay — we add a subtler film grain instead */
body.cinema .paper::before{ display:none; }

body.cinema::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:30;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(6,42,31,.12) 100%);
  mix-blend-mode:multiply;
  opacity:.85;
}

/* Subtle 16fps film grain — animated noise via tiled SVG */
.film-grain{
  position:fixed; inset:-50%;
  pointer-events:none;
  z-index:31;
  opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1.6s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  17%{transform:translate(-2%,1%)}
  34%{transform:translate(1%,-2%)}
  51%{transform:translate(-1%,2%)}
  68%{transform:translate(2%,-1%)}
  85%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}

/* ------------------------------------------------------------
   COLD-OPEN INTRO — 4-second cinematic title card
   Iris-out wipe reveals the page underneath
   ------------------------------------------------------------ */
.cold-open{
  position:fixed; inset:0; z-index:200;
  background:#062A1F;
  color:#F6F1E7;
  display:grid; place-items:center;
  overflow:hidden;
  cursor:pointer;
}
.cold-open .co-bg{
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=2400&q=80');
  background-size:cover; background-position:center 40%;
  filter:brightness(.35) contrast(1.1) saturate(.7);
  transform:scale(1.15);
  animation:co-zoom 4.6s var(--ease-glide) forwards;
}
@keyframes co-zoom{
  from{ transform:scale(1.18); filter:brightness(.2) contrast(1.1) saturate(.6) blur(8px) }
  to{   transform:scale(1.0);  filter:brightness(.45) contrast(1.05) saturate(.8) blur(0) }
}
.cold-open .co-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,42,31,.6) 0%, rgba(6,42,31,.2) 50%, rgba(6,42,31,.85) 100%);
}
.cold-open .co-content{
  position:relative; text-align:center; max-width:880px; padding:0 2rem;
}
.cold-open .co-mark{
  opacity:0; transform:translateY(20px) scale(.96);
  animation:co-rise 1.4s var(--ease-cinema) .35s forwards;
}
.cold-open .co-eyebrow{
  font-family:'DM Sans',sans-serif;
  letter-spacing:.4em; font-size:11px; text-transform:uppercase;
  color:#D9B574;
  opacity:0; transform:translateY(12px);
  animation:co-rise 1.2s var(--ease-cinema) 1.0s forwards;
}
.cold-open .co-title{
  font-family:'Fraunces',serif;
  font-weight:300;
  font-size:clamp(40px, 6.8vw, 96px);
  line-height:.95;
  letter-spacing:-.02em;
  margin:1.4rem auto 1.2rem;
  opacity:0; transform:translateY(20px);
  animation:co-rise 1.6s var(--ease-cinema) 1.4s forwards;
  /* Keep words whole + balance line breaks. Prevents "prop / erty." mid-word splits. */
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
  hyphens: none;
  max-width: 22ch;
}
.cold-open .co-title em{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:#D9B574;
  font-weight:400;
}
.cold-open .co-rule{
  width:0; height:1px; background:#D9B574; margin:2rem auto;
  animation:co-rule 1.4s var(--ease-cinema) 2.2s forwards;
}
@keyframes co-rule{ to{ width:120px } }
.cold-open .co-sub{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:18px;
  color:rgba(246,241,231,.78);
  opacity:0;
  animation:co-rise 1.2s var(--ease-cinema) 2.6s forwards;
}
.cold-open .co-skip{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  font-family:'DM Sans',sans-serif;
  letter-spacing:.3em; font-size:10px; text-transform:uppercase;
  color:rgba(246,241,231,.5);
  opacity:0;
  animation:co-rise 1s var(--ease-cinema) 3.4s forwards;
}
@keyframes co-rise{
  to{ opacity:1; transform:translateY(0) scale(1) }
}

/* Iris-out exit — circular reveal of page underneath */
.cold-open.exiting{
  animation:co-iris 1.4s var(--ease-iris) forwards;
}
@keyframes co-iris{
  0%   { clip-path:circle(150% at 50% 50%); }
  100% { clip-path:circle(0% at 50% 50%); }
}

/* ------------------------------------------------------------
   PARALLAX STAGES
   Wrap a hero block in .stage > .stage-bg / .stage-mid / .stage-fore
   JS sets --scroll (0..1) per stage so layers drift independently.
   ------------------------------------------------------------ */
.stage{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.stage-layer{
  position:absolute; inset:-10%;
  will-change:transform;
}
.stage-bg{
  z-index:1;
  transform:translate3d(0, calc(var(--scroll, 0) * -80px), 0) scale(1.08);
}
.stage-mid{
  z-index:2;
  transform:translate3d(0, calc(var(--scroll, 0) * -160px), 0) scale(1.04);
}
.stage-fore{
  z-index:3;
  transform:translate3d(0, calc(var(--scroll, 0) * -240px), 0);
}
.stage-content{
  position:relative; z-index:5;
}

/* Smooth focus-pull — image starts soft, sharpens on enter */
.focus-pull{
  filter:blur(14px) saturate(.7);
  transform:scale(1.1);
  transition:
    filter 1.6s var(--ease-glide),
    transform 1.8s var(--ease-glide);
}
.focus-pull.in-focus{
  filter:blur(0) saturate(1);
  transform:scale(1);
}

/* ------------------------------------------------------------
   SCENE — every section is a "scene" with entrance choreography
   ------------------------------------------------------------ */
.scene{
  position:relative;
  opacity:0;
  transition:opacity 1.4s var(--ease-cinema);
}
.scene.in-frame{ opacity:1; }

/* Mask wipe — edges fade in as the scene enters */
.scene::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(251,248,242,1) 0%, rgba(251,248,242,0) 8%, rgba(251,248,242,0) 92%, rgba(251,248,242,1) 100%);
  opacity:1;
  transition:opacity 2s var(--ease-glide);
}
.scene.in-frame::before{ opacity:0; }

/* Forest scenes get the dark veil */
.scene.scene-dark::before{
  background:linear-gradient(180deg, rgba(6,42,31,1) 0%, rgba(6,42,31,0) 8%, rgba(6,42,31,0) 92%, rgba(6,42,31,1) 100%);
}
.scene.scene-cream::before{
  background:linear-gradient(180deg, rgba(239,231,214,1) 0%, rgba(239,231,214,0) 8%, rgba(239,231,214,0) 92%, rgba(239,231,214,1) 100%);
}

/* ------------------------------------------------------------
   CINE-REVEAL — replace the basic .reveal with a layered animation:
   mask wipe (clip-path) + slight rise + focus-pull
   Children stagger via --i index set inline.
   ------------------------------------------------------------ */
body.cinema .reveal{
  opacity:0;
  transform:translateY(28px);
  clip-path:inset(0 0 100% 0);
  transition:
    opacity 1.4s var(--ease-cinema) calc(var(--i, 0) * 80ms),
    transform 1.4s var(--ease-cinema) calc(var(--i, 0) * 80ms),
    clip-path 1.4s var(--ease-cinema) calc(var(--i, 0) * 80ms);
}
body.cinema .reveal.in{
  opacity:1;
  transform:translateY(0);
  clip-path:inset(0 0 0 0);
}

/* Variant: mask wipe from left (good for headlines) */
body.cinema .reveal-wipe{
  clip-path:inset(0 100% 0 0);
}
body.cinema .reveal-wipe.in{
  clip-path:inset(0 0 0 0);
}

/* Variant: bottom-reveal (good for images) */
body.cinema .reveal-bottom{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.04);
  filter:blur(8px) saturate(.8);
  transition:
    clip-path 1.6s var(--ease-glide) calc(var(--i, 0) * 100ms),
    transform 1.8s var(--ease-glide) calc(var(--i, 0) * 100ms),
    filter 1.6s var(--ease-glide) calc(var(--i, 0) * 100ms),
    opacity 1s var(--ease-cinema);
}
body.cinema .reveal-bottom.in{
  clip-path:inset(0 0 0 0);
  transform:scale(1);
  filter:blur(0) saturate(1);
}

/* Letter-by-letter reveal for big serif headlines */
.cine-headline{ display:inline-block; }
.cine-headline .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(50%) rotateX(45deg);
  transform-origin:50% 100%;
  transition:
    opacity .9s var(--ease-cinema) calc(var(--ci, 0) * 30ms),
    transform 1.1s var(--ease-cinema) calc(var(--ci, 0) * 30ms);
}
.cine-headline.in .ch{
  opacity:1;
  transform:translateY(0) rotateX(0);
}

/* ------------------------------------------------------------
   IMAGE TREATMENTS — depth + cinematic motion
   ------------------------------------------------------------ */

/* Tilt on scroll — subtle rotateX based on viewport position.
   JS sets --tilt (-1 .. 1). */
.cine-tilt{
  transform-style:preserve-3d;
  perspective:1200px;
}
.cine-tilt > *{
  transform:rotateX(calc(var(--tilt, 0) * 4deg))
            translateY(calc(var(--tilt, 0) * -10px));
  transition:transform .4s var(--ease-glide);
}

/* Slow zoom — replaces .ken with cinematic creep */
body.cinema .ken{
  position:relative;
}
body.cinema .ken img{
  transition:transform 12s linear, filter .8s var(--ease-glide);
  transform:scale(1.04);
}
body.cinema .ken.in-frame img{
  transform:scale(1.14);
}
body.cinema .ken:hover img{
  transform:scale(1.18);
  filter:saturate(1.1) brightness(1.02);
}

/* Cut-out depth — give a hero figure a layer above its own backdrop.
   We fake this with a duplicate image, blurred + scaled, behind. */
.cutout{
  position:relative;
}
.cutout::before{
  content:""; position:absolute; inset:-8% -4%;
  background:inherit; background-size:cover; background-position:inherit;
  filter:blur(28px) saturate(.85) brightness(.9);
  opacity:.85;
  transform:scale(1.05) translateY(calc(var(--scroll, 0) * 20px));
  z-index:-1;
  border-radius:inherit;
}

/* Image ken-burns variants by scene index */
body.cinema [data-ken="zoom-in"] img{ animation:kb-zoom-in 16s var(--ease-glide) infinite alternate; }
body.cinema [data-ken="zoom-out"] img{ animation:kb-zoom-out 16s var(--ease-glide) infinite alternate; }
body.cinema [data-ken="pan-left"] img{ animation:kb-pan-left 18s var(--ease-glide) infinite alternate; }
body.cinema [data-ken="pan-right"] img{ animation:kb-pan-right 18s var(--ease-glide) infinite alternate; }
body.cinema [data-ken="tilt-up"] img{ animation:kb-tilt-up 20s var(--ease-glide) infinite alternate; }

@keyframes kb-zoom-in   { from{ transform:scale(1.04) translate(0,0) } to{ transform:scale(1.16) translate(0,-2%) } }
@keyframes kb-zoom-out  { from{ transform:scale(1.18) translate(2%,1%) } to{ transform:scale(1.04) translate(0,0) } }
@keyframes kb-pan-left  { from{ transform:scale(1.12) translate(3%,0) } to{ transform:scale(1.12) translate(-3%,0) } }
@keyframes kb-pan-right { from{ transform:scale(1.12) translate(-3%,0) } to{ transform:scale(1.12) translate(3%,0) } }
@keyframes kb-tilt-up   { from{ transform:scale(1.1) translate(0,2%) } to{ transform:scale(1.14) translate(0,-2%) } }

/* ------------------------------------------------------------
   HERO PLATE — cinema-aspect with depth layers
   ------------------------------------------------------------ */
.hero-plate{
  position:relative;
  aspect-ratio:21/9;
  border-radius:2px;
  overflow:hidden;
  box-shadow:
    0 80px 160px -40px rgba(6,42,31,.45),
    0 0 0 1px rgba(184,146,77,.15);
  isolation:isolate;
}
@media (max-width:768px){
  .hero-plate{ aspect-ratio:4/5; }
}
.hero-plate .plate-img{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  transform:translate3d(0, calc(var(--scroll, 0) * -40px), 0) scale(1.08);
  will-change:transform;
}
.hero-plate .plate-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,42,31,.05) 0%, rgba(6,42,31,.0) 35%, rgba(6,42,31,.55) 100%);
  z-index:2;
}
.hero-plate .plate-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem;
  z-index:3;
  color:#F6F1E7;
}

/* "Lens" letterbox bars — subtle cinema framing on hero */
.letterbox::before, .letterbox::after{
  content:""; position:absolute; left:0; right:0; height:3.2vw; max-height:48px;
  background:#062A1F;
  z-index:4; pointer-events:none;
  transform:translateY(-100%);
  transition:transform 1.6s var(--ease-cinema) .4s;
}
.letterbox::before{ top:0; }
.letterbox::after{ bottom:0; transform:translateY(100%); }
.letterbox.framed::before{ transform:translateY(0); }
.letterbox.framed::after{ transform:translateY(0); }

/* ------------------------------------------------------------
   SECTION TRANSITIONS — soft mask between scenes
   Each scene seam gets a gradient hand-off so the cut feels filmic.
   ------------------------------------------------------------ */
.seam{
  position:relative;
  height:120px;
  margin-top:-120px;
  z-index:10;
  pointer-events:none;
}
.seam-cream-to-paper{ background:linear-gradient(180deg, rgba(239,231,214,0) 0%, rgba(251,248,242,1) 100%); }
.seam-paper-to-cream{ background:linear-gradient(180deg, rgba(251,248,242,0) 0%, rgba(239,231,214,1) 100%); }
.seam-paper-to-forest{ background:linear-gradient(180deg, rgba(251,248,242,0) 0%, rgba(6,42,31,1) 100%); }
.seam-forest-to-paper{ background:linear-gradient(180deg, rgba(6,42,31,0) 0%, rgba(251,248,242,1) 100%); }
.seam-cream-to-forest{ background:linear-gradient(180deg, rgba(239,231,214,0) 0%, rgba(6,42,31,1) 100%); }
.seam-forest-to-cream{ background:linear-gradient(180deg, rgba(6,42,31,0) 0%, rgba(239,231,214,1) 100%); }

/* ------------------------------------------------------------
   CINEMATIC HERO — the opening shot
   ------------------------------------------------------------ */
.cine-hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.cine-hero .hero-bg{
  position:absolute; inset:-10%;
  background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=2600&q=80');
  background-size:cover; background-position:center 35%;
  transform:translate3d(0, calc(var(--scroll, 0) * 80px), 0) scale(calc(1.15 + var(--scroll, 0) * .08));
  filter:brightness(.78) saturate(.95);
  will-change:transform;
  z-index:0;
}
.cine-hero .hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(251,248,242,.0) 0%, rgba(251,248,242,.3) 60%, rgba(251,248,242,.95) 100%),
    linear-gradient(90deg, rgba(251,248,242,.92) 0%, rgba(251,248,242,.6) 35%, rgba(251,248,242,.0) 65%);
  z-index:1;
}
.cine-hero .hero-content{ position:relative; z-index:2; width:100%; }

/* Foreground architectural element — sits above the veil */
.cine-hero .hero-fore{
  position:absolute; right:-4%; bottom:-4%;
  width:54%; height:78%;
  background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1800&q=80');
  background-size:cover; background-position:center;
  transform:translate3d(0, calc(var(--scroll, 0) * -120px), 0);
  z-index:2;
  border-left:1px solid rgba(184,146,77,.25);
  box-shadow: -40px 0 80px -20px rgba(6,42,31,.35);
  will-change:transform;
  clip-path:polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width:1024px){
  .cine-hero .hero-fore{ display:none; }
  .cine-hero .hero-veil{
    background:linear-gradient(180deg, rgba(251,248,242,.85) 0%, rgba(251,248,242,.7) 50%, rgba(251,248,242,.95) 100%);
  }
}

/* Scroll cue — animated indicator at the bottom of hero */
.scroll-cue{
  position:absolute; left:50%; bottom:2.4rem;
  transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-family:'DM Sans',sans-serif;
  letter-spacing:.4em; font-size:10px; text-transform:uppercase;
  color:rgba(10,61,46,.55);
}
.scroll-cue::after{
  content:""; width:1px; height:48px;
  background:linear-gradient(180deg, rgba(10,61,46,.6), rgba(10,61,46,0));
  animation:cue 2.4s var(--ease-cinema) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%   { transform:scaleY(0); }
  40%  { transform:scaleY(1); }
  100% { transform:scaleY(1) translateY(48px); opacity:0; }
}

/* ------------------------------------------------------------
   FEATURED SCENE — Victoria Park townhouse — cut-out depth
   ------------------------------------------------------------ */
.featured-stage{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.featured-bg-img{
  position:absolute; inset:-15%;
  background-image:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2400&q=80');
  background-size:cover; background-position:center;
  filter:brightness(.55) saturate(.8) blur(2px);
  transform:translate3d(0, calc(var(--scroll, 0) * -100px), 0) scale(1.15);
  will-change:transform;
  z-index:0;
}
.featured-bg-veil{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(6,42,31,.85) 0%, rgba(6,42,31,.5) 50%, rgba(6,42,31,.92) 100%);
  z-index:1;
}
.featured-fore-img{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid rgba(217,181,116,.35);
  box-shadow:
    0 100px 180px -40px rgba(0,0,0,.6),
    0 0 0 8px rgba(246,241,231,.04);
  background-size:cover;
  background-position:center;
  background-image:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1600&q=80');
  transform:translate3d(0, calc(var(--scroll, 0) * -60px), 0) scale(calc(1 + var(--scroll, 0) * .04));
  will-change:transform;
}

/* ------------------------------------------------------------
   LISTINGS GRID — staggered cards with scene-entrance
   ------------------------------------------------------------ */
body.cinema #grid > article{
  --i:0;
}
body.cinema #grid > article .ken{
  border-radius:2px;
}

/* ------------------------------------------------------------
   MAP SCENE — the area selector becomes a focus pull
   ------------------------------------------------------------ */
body.cinema #areas .corner{
  box-shadow:0 60px 120px -40px rgba(6,42,31,.3);
  transition:box-shadow .8s var(--ease-glide);
}
body.cinema #areas.in-frame .corner{
  box-shadow:0 80px 160px -40px rgba(6,42,31,.45);
}

/* ------------------------------------------------------------
   PILLARS — staggered border draw + content fade
   ------------------------------------------------------------ */
body.cinema #manage article{
  position:relative;
}
body.cinema #manage article::before{
  content:""; position:absolute; inset:0;
  border-bottom:1px solid var(--terracotta);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease-cinema) calc(var(--i, 0) * 120ms);
}
body.cinema #manage.in-frame article::before{ transform:scaleX(1); }

/* ------------------------------------------------------------
   CINEMATIC NAV — hides on scroll-down, shows on scroll-up
   ------------------------------------------------------------ */
body.cinema .navbar{
  transition:transform .5s var(--ease-cinema), background .5s var(--ease-cinema), box-shadow .5s;
}
body.cinema .navbar.nav-hidden{
  transform:translateY(-100%);
}
body.cinema.scrolled .navbar{
  background:rgba(251,248,242,.85);
  backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:0 1px 0 rgba(10,61,46,.06), 0 20px 40px -30px rgba(6,42,31,.2);
}

/* ------------------------------------------------------------
   CINEMATIC BUTTON HOVER — soft sweep + magnetic lift
   ------------------------------------------------------------ */
body.cinema .btn-primary,
body.cinema .btn-ghost{
  transition:
    transform .45s var(--ease-cinema),
    box-shadow .45s var(--ease-cinema),
    background .35s ease,
    color .35s ease;
}
body.cinema .btn-primary:hover,
body.cinema .btn-ghost:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 48px -16px rgba(6,42,31,.3);
}

/* ------------------------------------------------------------
   FOOTER — final fade to black
   ------------------------------------------------------------ */
body.cinema footer{
  position:relative;
  isolation:isolate;
}
body.cinema footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:140px;
  background:linear-gradient(180deg, rgba(6,42,31,0), rgba(6,42,31,1));
  z-index:1; pointer-events:none;
}

/* ------------------------------------------------------------
   ACCESSIBILITY — gracefully strip motion if requested
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  body.cinema *,
  body.cinema *::before,
  body.cinema *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.2s !important;
  }
  body.cinema .stage-layer,
  body.cinema .cine-hero .hero-bg,
  body.cinema .cine-hero .hero-fore,
  body.cinema .featured-bg-img,
  body.cinema .featured-fore-img,
  body.cinema .hero-plate .plate-img{
    transform:none !important;
  }
  body.cinema .reveal{ opacity:1; transform:none; clip-path:none; }
  body.cinema .reveal-bottom{ filter:none; }
  body.cinema .cine-headline .ch{ opacity:1; transform:none; }
  body.cinema .film-grain{ display:none; }
  .cold-open{ display:none; }
}