/* ============================================================
   LAPOVISION · Phase 2 — a world, not a portfolio
   Paradiso Terrestre: silence · suspension · held light · warm whites
   two voices (Cremiss feels · PP Neue Montreal informs) · one accent: bronze
   ============================================================ */

@font-face{font-family:"Cremiss";src:url("/assets/fonts/Cremiss.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/assets/fonts/PPNeueMontreal-Book.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/assets/fonts/PPNeueMontreal-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/assets/fonts/PPNeueMontreal-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* warm, never absolute */
  --ink:#0E0C0B; --ink2:#15110D; --teak:#211810;
  --sale:#F1ECE6; --sand:#E5DCCD; --stone:#D2C6B4;
  --mineral:#C9BFB0; --ash:#8E8576;
  --bronze:#A07E50; --bronze-soft:#BC9A68;
  --line-d:rgba(241,236,230,.12);
  --line-l:rgba(20,16,12,.14);
  --serif:"Cremiss",Georgia,serif;
  --grot:"PP Neue Montreal",-apple-system,Segoe UI,sans-serif;
  --ls:.30em;
  --gut:clamp(24px,6vw,120px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--grot); color:var(--mineral); background:var(--ink);
  line-height:1.55; letter-spacing:.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--bronze);color:var(--ink)}

/* ---------- z0 · the film ---------- */
/* promoted to its own GPU layer so scrolling content never repaints it (iOS) */
.film{position:fixed;inset:0;z-index:0;background:#0b0a09;
  transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.film-video{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0)}
.film-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% 28%, transparent 46%, rgba(10,9,8,.30) 100%),
    linear-gradient(180deg, rgba(10,9,8,.28) 0%, transparent 24%, transparent 68%, rgba(10,9,8,.46) 100%);
}

/* ---------- z1 · grain (tempo, patina — barely there) ---------- */
.grain{
  position:fixed;inset:-20%;z-index:1;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* everything above the film */
main,.bar,.frame{position:relative;z-index:3}

/* ---------- z6 · progress (one accent) ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bronze),var(--bronze-soft));
  transition:transform .1s linear}

/* ---------- z6 · dossier frame ---------- */
.frame{position:fixed;inset:0;z-index:4;pointer-events:none;
  font-family:var(--grot);font-size:10px;letter-spacing:var(--ls);
  text-transform:lowercase;color:var(--ash)}
.frame span{position:absolute;opacity:.62}
.frame-bl{left:var(--gut);bottom:22px}
.frame-br{right:var(--gut);bottom:22px}
.frame-br i{font-style:normal;color:var(--bronze-soft)}
@media(max-width:760px){.frame-bl{display:none}}

/* ---------- whisper bar ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:8;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gut);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
  background:linear-gradient(180deg, rgba(10,9,8,.46), transparent);
}
.bar.show{opacity:1;transform:none;pointer-events:auto}
.bar-brand img{width:116px;height:auto;opacity:.94}
.bar-right{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.bar-right a{font-size:11px;letter-spacing:.18em;text-transform:lowercase;color:var(--stone);opacity:.78;transition:opacity .3s}
.bar-right a:hover{opacity:1}
.lang{background:none;border:0;color:var(--stone);font-family:var(--grot);font-size:11px;letter-spacing:.14em;cursor:pointer;opacity:.8}
.lang .sep{margin:0 5px;opacity:.5}
.lang .l-it{opacity:.42}
.lang.it .l-en{opacity:.42}.lang.it .l-it{opacity:1}

/* ---------- ACT 0 · the logo, alone ---------- */
.open{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.open-logo img{
  width:min(58vw,720px);height:auto;
  animation:rise 1.9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.open-cue{
  position:absolute;bottom:40px;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:10px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash);opacity:0;
  animation:fade 2s ease 1.2s forwards;
}
.cue-line{width:1px;height:48px;background:linear-gradient(var(--ash),transparent);opacity:.5;animation:breathe 3.6s ease-in-out infinite}
@keyframes fade{to{opacity:.72}}
@keyframes breathe{0%,100%{transform:scaleY(.6);opacity:.35}50%{transform:scaleY(1);opacity:.7}}

/* ---------- BREATH · a line in the film ---------- */
.breath{position:relative;min-height:64svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.whisper{font-family:var(--serif);font-weight:400;color:var(--sale);
  font-size:clamp(26px,4.4vw,56px);line-height:1.12;letter-spacing:-.01em;
  max-width:18ch;text-shadow:0 1px 40px rgba(8,7,6,.5)}
.whisper.sm{font-family:var(--grot);font-size:12px;letter-spacing:.16em;text-transform:lowercase;color:var(--stone);max-width:42ch;text-shadow:none}
.orbita{min-height:52svh}

/* ---------- PANELS · the material shore (emersione) ---------- */
.panel{position:relative;padding:clamp(80px,14vh,200px) 0}
.panel .wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.panel.dark{background:linear-gradient(180deg,var(--ink) 0%, var(--ink2) 100%);color:var(--mineral)}
.panel.dark::before,.panel.warm::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--line-d)}
.panel.warm{background:linear-gradient(180deg,var(--sale) 0%, var(--sand) 100%);color:var(--teak)}
.panel.warm::before{background:var(--line-l)}

/* eyebrow — the informing voice */
.ey{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;
  font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash)}
.ey.center{justify-content:center}
.ey .num{font-family:var(--serif);font-size:22px;letter-spacing:0;color:var(--bronze)}
.panel.warm .ey{color:#8a7a63}.panel.warm .ey .num{color:var(--bronze)}

/* display — the feeling voice */
.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;
  font-size:clamp(34px,6vw,76px);max-width:16ch}
.panel.dark .display{color:var(--sale)}
.panel.warm .display{color:var(--teak)}
.display.big{font-size:clamp(46px,9vw,118px);max-width:none}

.lede{display:flex;flex-direction:column;gap:22px;margin-top:38px;max-width:60ch}
.lede p,.intro{font-size:clamp(16px,1.55vw,20px);line-height:1.62}
.panel.dark .lede p,.panel.dark .intro{color:var(--mineral)}
.panel.warm .intro{color:#5a4c3c}
.intro{margin-top:36px;max-width:56ch}
.seal{font-size:14px!important;letter-spacing:.02em;color:var(--ash)!important;font-style:italic}

/* II · diptych */
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:60px;background:var(--line-l)}
.dip{background:var(--sale);padding:clamp(26px,4vw,52px) clamp(22px,3vw,44px)}
.panel.warm .diptych{background:var(--line-l)}
.dip .k{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--bronze);margin-bottom:18px}
.dip .v{display:block;font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.22;color:var(--teak)}
.dip .v.strong{color:#1b130c}

/* III · index list */
.index{list-style:none;margin-top:54px}
.index li{display:grid;grid-template-columns:54px 1fr auto;align-items:baseline;gap:18px;
  padding:26px 0;border-top:1px solid var(--line-d);transition:padding-left .4s ease}
.index li:last-child{border-bottom:1px solid var(--line-d)}
.index li:hover{padding-left:14px}
.index i{font-style:normal;font-family:var(--grot);font-size:11px;letter-spacing:.16em;color:var(--ash)}
.index .n{font-family:var(--serif);font-size:clamp(28px,4.4vw,48px);color:var(--sale);line-height:1}
.index .t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.index li:hover .n{color:#fff}

/* cta */
.cta{display:inline-block;margin-top:40px;font-size:13px;letter-spacing:.05em;
  border-bottom:1px solid var(--bronze);padding-bottom:4px;transition:opacity .3s, letter-spacing .3s}
.panel.dark .cta{color:var(--sale)}.panel.warm .cta{color:var(--teak)}
.cta:hover{letter-spacing:.09em;opacity:.85}

/* ---------- LANDING · the warm shore ---------- */
.land{position:relative;z-index:3;background:linear-gradient(180deg,var(--sand) 0%, var(--sale) 34%);
  color:var(--teak);text-align:center;padding:clamp(110px,20vh,260px) var(--gut) 64px}
.land-in{max-width:900px;margin:0 auto}
.land .display.big{margin:18px auto 0;color:var(--teak)}
.land-sub{font-size:12px;letter-spacing:.16em;text-transform:lowercase;color:#8a7a63;margin:26px 0 12px}
.land-mail{display:inline-block;font-size:clamp(17px,2.4vw,24px);color:var(--teak);border-bottom:1px solid var(--bronze);padding-bottom:5px;transition:letter-spacing .3s}
.land-mail:hover{letter-spacing:.02em}
.land-mark{margin:clamp(70px,14vh,150px) auto 56px;opacity:.9}
.land-mark img{width:min(44vw,280px);height:auto;margin:0 auto}
.land-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;
  font-size:10px;letter-spacing:.16em;text-transform:lowercase;color:#9a8a72}

/* ---------- SHOT · full-bleed emotional image ---------- */
.shot{position:relative;height:100svh;overflow:hidden;background:#0b0a09}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);
  transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.shot.in img{transform:scale(1)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,.22) 0%, transparent 26%, transparent 56%, rgba(8,7,6,.62) 100%)}
.shot-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(34px,7vh,90px);z-index:2}
.cap-ey{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:14px;opacity:.9}
.cap-line{font-family:var(--serif);font-weight:400;color:var(--sale);
  font-size:clamp(24px,4vw,50px);line-height:1.08;letter-spacing:-.01em;max-width:20ch}

/* ---------- KK · KlaudeKollection ---------- */
.kk-wrap{display:block;text-align:center}
.kk-head{max-width:62ch;margin:0 auto}
.kk-head .ey.center{justify-content:center}
.kk-head .display{margin-inline:auto}
.kk-head .intro{margin:18px auto 0;max-width:54ch}
.kk-shot{position:relative;margin-top:clamp(40px,6vw,72px);border-radius:3px;overflow:hidden;
  box-shadow:0 50px 140px -60px rgba(0,0,0,.5)}
.kk-shot img{width:100%;height:auto;display:block}
.kk-shot figcaption{display:none}
.kk-shot.empty{aspect-ratio:16/8;background:
  linear-gradient(180deg,#e9e1d4,#ddd1bf);display:flex;align-items:center;justify-content:center;box-shadow:none;
  border:1px solid var(--line-l)}
.kk-shot.empty img{display:none}
.kk-shot.empty figcaption{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:#9a8a72}
.kk-spec{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:clamp(26px,3.4vw,40px)}
.kk-name{font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--ink);letter-spacing:-.01em}
.kk-dim,.kk-mat{font-size:12px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--ash)}
.kk .soon{font-size:11px;letter-spacing:var(--ls);
  text-transform:uppercase;color:var(--bronze);border:1px solid var(--bronze);border-radius:40px;padding:8px 18px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.15s cubic-bezier(.2,.7,.2,1),transform 1.15s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .bar-right a{display:none}
  .open-logo img{width:84vw}
  .diptych{grid-template-columns:1fr}
  .index li{grid-template-columns:40px 1fr;row-gap:6px}
  .index .t{grid-column:2}
  .whisper{max-width:14ch}
  .kk-spec{gap:12px 18px}
  .shot{height:86svh}
  /* kill the fixed mix-blend grain on mobile — it recomposites the whole viewport every frame (scroll jank) */
  .grain{display:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .open-cue{opacity:.72}
  .progress{display:none}
}