/* ==========================================================================
   Cinema layer — scroll-driven scenes on the home page.
   Everything here is additive: with cinema.js absent, or with reduced motion
   asked for, the page reads exactly as before (see the .cine-off rules).
   ========================================================================== */

:root{
  --cine-accent:#FF6B1A;
  --cine-ink:#F5F5F5;
  --cine-dim:rgba(245,245,245,.16);
  --cine-ease:cubic-bezier(.16,1,.3,1);
}

/* Lenis smooth scrolling */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- film grain over everything ---------- */
.cine-grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:cine-grain 1.2s steps(6) infinite;
  display:none;   /* off: it read as pixelation, not as film */
}
@keyframes cine-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}
  60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}

/* ---------- letterbox: the page opens like a film ---------- */
.cine-bar{position:fixed;left:0;right:0;height:14vh;background:#000;z-index:9500;pointer-events:none;
  transition:transform 1.4s var(--cine-ease) .25s}
.cine-bar.top{top:0}
.cine-bar.bot{bottom:0}
.cine-open .cine-bar.top{transform:translateY(-100%)}
.cine-open .cine-bar.bot{transform:translateY(100%)}

/* ---------- reading progress ---------- */
.cine-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9100;pointer-events:none;
  background:var(--cine-accent);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(255,107,26,.7)}

/* ---------- the opening film (film.js) ---------- */
/* On a phone the nav's frosted glass would re-blur the moving film under it
   every frame; a plain dark bar costs nothing and reads the same. */
@media (max-width:899px){
  .cine-on header.nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,10,10,.94)}
}
.film{position:relative}
.film-canvas,.film-beat,.film-flash,.film-fade,.film-hint,.film-vignette{display:none}
/* darkens the edges during the dive, so the close-up keeps its shadows */
.film-live .film-vignette{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 75% 70% at 50% 50%, rgba(5,4,3,0) 30%, rgba(5,4,3,.55) 70%, rgba(5,4,3,.92) 100%)}
.film.film-live{height:440vh}

.film-live .film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#050403}
.film-live .film-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity .9s ease}
.film-ready .film-canvas{opacity:1}
.film-live .hero{height:100%;min-height:0;background:transparent}
.film-live .hero-canvas,.film-live .hero-brand{display:none}
/* until the 3D has arrived the stage is a dark field with a soft orange glow
   where the crest will appear, under the headline: never the old hero */
.film-live .film-stage{background:radial-gradient(38% 46% at 79% 46%, rgba(255,107,26,.13), rgba(255,107,26,0) 70%), #050403}
@media (max-width:899px){
  .film-live .film-stage{background:radial-gradient(60% 30% at 50% 26%, rgba(255,107,26,.14), rgba(255,107,26,0) 70%), #050403}
}
/* the copy sits over the film: the scrim only darkens behind the words */
.film-live .hero-overlay{background:radial-gradient(60% 70% at 22% 55%, rgba(5,4,3,.78), rgba(5,4,3,.25) 55%, rgba(5,4,3,0) 80%)}
@media (max-width:899px){
  .film-live .hero{justify-content:flex-end;padding-bottom:calc(64px + 3vh)}
  .film-live .hero-overlay{background:linear-gradient(180deg, rgba(5,4,3,0) 30%, rgba(5,4,3,.85) 62%)}
}
.film-live .film-beat{
  display:block;position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;opacity:0;white-space:nowrap;
  transform:translate3d(-50%,-50%,0);
  font-family:"Saira Condensed","Geologica",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(56px,13vw,230px);line-height:.9;color:#fff;
  text-shadow:0 0 44px rgba(255,107,26,.28),0 0 2px rgba(255,255,255,.4);
}
html[lang="el"] .film-live .film-beat{font-size:clamp(34px,8.6vw,150px)}
/* the last word sits on the orange sun: white, with a dark edge so it holds */
.film-live .film-beat:nth-of-type(3){color:#fff;text-shadow:0 2px 24px rgba(40,16,4,.7),0 0 60px rgba(255,107,26,.4)}
.film-live .film-flash{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, #ffd2b3 0%, #ff9a5c 32%, #ff6b1a 68%, #a8460f 100%)}
.film-live .film-fade{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:var(--bg,#0a0a0a)}
.film-live .film-hint{display:block;position:absolute;left:50%;bottom:28px;z-index:3;width:1px;height:54px;transform:translateX(-50%);
  background:rgba(255,255,255,.18);overflow:hidden;pointer-events:none}
.film-live .film-hint span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--cine-accent);
  animation:film-hint 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes film-hint{to{top:110%}}
@media (max-width:899px){ .film-live .film-hint{bottom:14px;height:38px} }

/* ---------- hero: leaves the screen like a camera pulling back ---------- */
.cine-on .hero-copy,.cine-on .hero-brand{will-change:transform,opacity}

/* ---------- manifesto: the one-breath line, lit word by word ---------- */
.cine-who{padding:0 !important;position:relative}
.cine-on .cine-who{height:230vh}
.cine-who-sticky{position:relative}
.cine-on .cine-who-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.cine-who .eyebrow{display:block;margin-bottom:28px;color:var(--cine-accent);letter-spacing:.18em}
.cine-on .cine-who .who-text{
  font-size:clamp(23px,3.3vw,50px);line-height:1.2;letter-spacing:-.02em;font-weight:700;
  padding-left:0;max-width:18ch;max-width:min(1100px,92vw);
}
.cine-on .cine-who .who-text::before{display:none}
.cine-on .cine-who .who-text.cine-src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the paragraph pulls into focus; then the closing sentence turns brand
   orange and an underline draws beneath it, line after line */
.cine-focus{display:block;color:var(--cine-ink);transform-origin:0 50%;will-change:filter,transform,opacity}
/* On a phone the focus pull plays once, as the section arrives, instead of
   re-blurring the paragraph on every move of the finger. */
.cine-focus.cine-focus-timed{transition:filter 1.3s var(--cine-ease),opacity 1.3s var(--cine-ease),transform 1.3s var(--cine-ease);
  filter:blur(12px);opacity:.15;transform:scale(1.06)}
.cine-focus.cine-focus-timed.in-focus{filter:none;opacity:1;transform:none}
.cine-focus .punch{
  transition:color .7s var(--cine-ease);
  background-image:linear-gradient(var(--cine-accent),var(--cine-accent));
  background-repeat:no-repeat;background-position:0 94%;background-size:var(--u,0%) .07em;
  -webkit-box-decoration-break:slice;box-decoration-break:slice;
}
.cine-focus.punched .punch{color:var(--cine-accent)}
.cine-who-glow{position:absolute;inset:auto -20% -40% -20%;height:70vh;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,107,26,.16),transparent);opacity:0}

/* ---------- the tagline, running across the screen ---------- */
.cine-marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  padding:3.2vw 0;background:#070707;position:relative}
.cine-marquee-track{display:flex;align-items:center;gap:4vw;white-space:nowrap;width:max-content;will-change:transform}
.cine-marquee-track span{
  font-family:"Saira Condensed","Geologica",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(54px,11vw,190px);line-height:.9;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(245,245,245,.32);
}
.cine-marquee-track span.solid{color:var(--cine-ink);-webkit-text-stroke:0}
.cine-marquee-track img{height:clamp(46px,8vw,130px);width:auto;opacity:.95;flex:none}

/* ---------- client work: photos develop in, at their own depth ---------- */
.cine-on .cs-shots figure{will-change:transform,clip-path}

/* ---------- Reservi device turns toward you ---------- */
.cine-on .rv-home-band .rv-visual{perspective:1400px}
.cine-on .rv-home-band .rv-device{will-change:transform;transform-style:preserve-3d}

/* ---------- what we bring: an orange line draws across each column ---------- */
.cine-on .icol{position:relative}
.cine-on .icol::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--cine-accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--cine-ease)}
.cine-on .icol.in::after{transform:scaleX(1)}
.cine-on .icol.d1::after{transition-delay:.15s}
.cine-on .icol.d2::after{transition-delay:.3s}
.cine-on .icol .num{font-family:"Saira Condensed",sans-serif;font-size:56px;line-height:1;letter-spacing:0;
  color:transparent;-webkit-text-stroke:1px rgba(245,245,245,.22);font-weight:700;margin:-6px 0 0 12px}

/* ---------- how we work: cards stack on top of each other ---------- */
.cine-on .work .cards-3{display:block}
.cine-on .work .pcard{
  position:sticky;top:calc(96px + var(--i,0) * 22px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:stretch;
  min-height:min(64vh,560px);margin-bottom:6vh;padding:36px;
  transform-origin:50% 0;will-change:transform;
}
.cine-on .work .pcard .pc-top{grid-column:2;grid-row:1;align-self:start}
.cine-on .work .pcard .pc-media{grid-column:1;grid-row:1 / span 2;height:auto;min-height:280px}
.cine-on .work .pcard .pc-body{grid-column:2;grid-row:2;align-self:end}
.cine-on .work .pcard h3{font-size:clamp(28px,3.4vw,52px);line-height:1.02;letter-spacing:-.03em}
.cine-on .work .pcard .pc-desc{font-size:1.06rem;max-width:42ch}
.cine-on .work .pcard .pc-index{font-family:"Saira Condensed",sans-serif;font-size:64px;line-height:1;font-weight:700;
  color:transparent;-webkit-text-stroke:1px rgba(255,107,26,.6)}
.cine-on .work .pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;
  opacity:var(--dim,0);pointer-events:none;z-index:2;transition:opacity .1s linear}
.cine-on .work .pcard:hover{transform:none}
@media (max-width:820px){
  .cine-on .work .pcard{grid-template-columns:1fr;gap:18px;padding:22px;top:calc(76px + var(--i,0) * 14px);min-height:0}
  .cine-on .work .pcard .pc-top,.cine-on .work .pcard .pc-media,.cine-on .work .pcard .pc-body{grid-column:1;grid-row:auto}
  .cine-on .work .pcard .pc-media{min-height:0;height:150px}
  .cine-on .work .pcard .pc-index{font-size:44px}
}

/* ---------- finale: one big invitation ---------- */
.cine-finale{position:relative;overflow:hidden;padding:18vh 0 16vh;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
.cine-finale-crest{width:clamp(90px,11vw,150px);height:auto;margin:0 auto 34px;display:block;will-change:transform;
  filter:drop-shadow(0 0 40px rgba(255,107,26,.35))}
.cine-finale h2{
  font-family:"Saira Condensed","Geologica",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:clamp(64px,15vw,260px);line-height:.86;letter-spacing:-.02em;margin:0;will-change:transform;
  background:linear-gradient(180deg,#fff 30%,rgba(245,245,245,.35));-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Saira Condensed has no Greek: Greek falls back to the much wider Geologica */
html[lang="el"] .cine-finale h2{font-size:clamp(46px,10.5vw,170px);line-height:.95}
.cine-finale .cta-row{justify-content:center;margin-top:44px}
.cine-finale-sun{position:absolute;left:50%;bottom:-60vh;width:120vh;height:120vh;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,107,26,.32),rgba(255,107,26,.08) 55%,transparent);opacity:.2}

/* ---------- no motion: everything static, nothing hidden ---------- */
.cine-off .cine-grain,.cine-off .cine-bar,.cine-off .cine-progress{display:none}
.cine-off .cine-who{padding:64px 0 56px !important}
.cine-off .cine-who .eyebrow{margin-bottom:16px}