/* ==========================================================================
   VERONA Cinema — title sequence, character reveals and film-like photo cuts.
   Every hidden state is applied by cinema.js only, so the page is complete
   without JavaScript. Photographs are masked during a cut, never cropped or zoomed.
   ========================================================================== */

:root{
  --cine-ease:cubic-bezier(.77,0,.18,1);
  --cine-soft:cubic-bezier(.22,1,.36,1);
  --cine-grain: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Character reveal: a focus pull, one letter at a time ---------- */
.cine-ch{display:inline-block;white-space:pre}
.cine-armed .cine-ch{opacity:0;filter:blur(10px);transform:translate3d(0,.32em,0)}
.cine-play .cine-ch{opacity:1;filter:blur(0);transform:none;
  transition:opacity .9s var(--cine-soft),filter 1.15s var(--cine-soft),transform 1.15s var(--cine-soft);
  transition-delay:calc(var(--i) * var(--step,42ms) + var(--d,0ms))}
/* The split heading carries its own motion; older whole-heading fades step aside. */
.cine-split.text-pending,.cine-split.text-entered{opacity:1!important;transform:none!important;clip-path:none!important}
body.home.hm-enabled .hm-enter.hm-sequence>.cine-split,
body.home.hm-enabled .hm-enter .hm-hero-title.cine-host{animation:none!important;opacity:1;clip-path:none}

/* ---------- Film grain ---------- */
.cine-grain{position:absolute;inset:-60%;z-index:1;pointer-events:none;background:var(--cine-grain);opacity:.075;mix-blend-mode:screen}
.hero.real-photography{overflow:hidden}
.hero.real-photography .hero-copy{z-index:2}

/* ---------- Photo cuts: the next photograph rises like a curtain ---------- */
.cine-progress{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(244,241,234,.16);pointer-events:none}
.cine-progress i{position:absolute;inset:0;background:var(--gold-light,#d9c49c);transform:scaleX(0);transform-origin:left center}
.cine-progress.is-running i{animation:cine-progress var(--cine-interval,8000ms) linear both}
.cine-counter{position:absolute;z-index:3;left:50%;bottom:40px;transform:translateX(-50%);font:500 12px/1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.26em;color:rgba(244,241,234,.78);pointer-events:none}
.cine-counter:empty{display:none}
.v-carousel:not(.hero-carousel) .cine-counter{display:none}
.stage-hero .cine-progress{left:50%;right:auto;bottom:26px;width:min(200px,40vw);height:1px;transform:translateX(-50%)}
.cine-backdrop{position:absolute;inset:-10%;z-index:0;background:center/cover no-repeat;filter:blur(44px) brightness(.5) saturate(1.2);pointer-events:none}

/* ---------- Title sequence ---------- */
html.cine-lock,html.cine-lock body{overflow:hidden}
.cine-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 45%,#262b28 0%,#1c201e 55%,#141715 100%);color:#f4f1ea;
  clip-path:inset(0);cursor:pointer}
.cine-intro-inner{position:relative;z-index:2;grid-area:1/1;display:grid;justify-items:center;gap:26px;width:min(440px,72vw);transition:opacity .6s ease,transform .9s var(--cine-soft),filter .6s ease}
.cine-intro.is-copy .cine-intro-inner{opacity:0;transform:translateY(-14px);filter:blur(6px)}
.cine-intro-copy{position:relative;z-index:2;grid-area:1/1;margin:0;display:flex;flex-direction:row-reverse;gap:.85em;font:500 clamp(32px,min(4.2vw,5.6svh),52px)/1.7 'Shippori Mincho','Yu Mincho',serif;font-feature-settings:"palt";letter-spacing:.3em;color:#f4f1ea}
.cine-intro-col{writing-mode:vertical-rl}
.cine-intro .signature-art{width:100%}
.cine-intro-rule{display:block;width:72px;height:1px;background:#b59a6a;transform:scaleX(0)}
.cine-intro-line{margin:0;font:italic 400 clamp(15px,1.6vw,19px)/1.4 'Cormorant Garamond','Shippori Mincho',Georgia,serif;letter-spacing:.08em;color:#d9c49c;opacity:0}
.cine-intro-skip{position:absolute;z-index:2;right:24px;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0;font:12px/1 'Zen Kaku Gothic New','Yu Gothic',sans-serif;letter-spacing:.14em;color:rgba(244,241,234,.5)}
.cine-intro .signature-symbol{opacity:0}
.cine-intro .signature-name{opacity:0}

@media(prefers-reduced-motion:no-preference){
  .cine-grain{animation:cine-grain 1s steps(5) infinite}

  .v-carousel.is-ready.cine-cut .carousel-slide{opacity:1;z-index:1;clip-path:inset(100% 0 0 0);
    transition:clip-path 0s linear 1s,visibility 0s linear 1s}
  .v-carousel.is-ready.cine-cut .carousel-slide.is-active{z-index:2;clip-path:inset(0);
    transition:clip-path .9s var(--cine-ease),visibility 0s}

  .cine-intro.is-playing .signature-symbol{animation:cine-symbol 1.1s var(--cine-soft) .15s both}
  .cine-intro.is-playing .signature-name{animation:cine-name 1.3s var(--cine-ease) .55s both}
  .cine-intro.is-playing .cine-intro-rule{animation:cine-rule 1s var(--cine-ease) 1s both}
  .cine-intro.is-playing .cine-intro-line{animation:cine-fade .9s var(--cine-soft) 1.25s both}
  .cine-intro.is-leaving{animation:cine-lift 1s var(--cine-ease) both}
  .cine-intro.is-leaving .cine-intro-copy{animation:cine-away 1s var(--cine-ease) both}
}

@keyframes cine-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}
  60%{transform:translate(-3%,-9%)}80%{transform:translate(8%,6%)}100%{transform:translate(0,0)}
}
@keyframes cine-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cine-symbol{from{opacity:0;filter:blur(12px);clip-path:inset(100% 67% 0 0)}to{opacity:1;filter:blur(0);clip-path:inset(0 67% 0 0)}}
@keyframes cine-name{from{opacity:0;filter:blur(6px);clip-path:inset(0 66% 0 34%)}to{opacity:1;filter:blur(0);clip-path:inset(0 0 0 34%)}}
@keyframes cine-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cine-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cine-lift{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes cine-away{from{transform:none;opacity:1}to{transform:translateY(-6vh);opacity:0}}

@media(max-width:700px){
  .cine-progress{height:2px}
  .stage-hero .cine-progress{bottom:20px;height:1px}
  .cine-counter{bottom:30px}
  .cine-intro-inner{gap:20px}
}
@media(prefers-reduced-motion:reduce){
  .cine-intro{display:none}
  .cine-armed .cine-ch{opacity:1;filter:none;transform:none}
}