/* =========================================================
   Swimming Pool · Case History — Different Studio system
   Slide canvas: 1280×720 · matches 2025 Overview deck
   ========================================================= */

/* Different Studio fonts — local, variable */
@font-face{font-family:"DM Sans";src:url("../assets/fonts/DMSans-VariableFont.ttf") format("truetype-variations");font-weight:100 1000;font-style:normal;font-display:swap;}
@font-face{font-family:"DM Sans";src:url("../assets/fonts/DMSans-Italic-VariableFont.ttf") format("truetype-variations");font-weight:100 1000;font-style:italic;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("../assets/fonts/InstrumentSans-VariableFont.ttf") format("truetype-variations");font-weight:100 1000;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("../assets/fonts/InstrumentSans-Italic-VariableFont.ttf") format("truetype-variations");font-weight:100 1000;font-style:italic;font-display:swap;}

:root{
  --ds-antracite:#1E1E1E;
  --ds-blu-ardesia:#1A2F3E;
  --ds-grigio-film:#71746C;
  --ds-grigio-ghiaccio:#ECEEF0;
  --ds-bianco:#FFFFFF;
  --ds-cognac:#B07A30;

  --font-display:"DM Sans",system-ui,sans-serif;
  --font-body:"Instrument Sans",Georgia,serif;

  --bg:var(--ds-bianco);
  --bg-soft:var(--ds-grigio-ghiaccio);
  --bg-deep:var(--ds-antracite);
  --bg-cool:var(--ds-blu-ardesia);

  --fg1:var(--ds-antracite);
  --fg2:var(--ds-grigio-film);
  --fg-on-dark:var(--ds-bianco);
  --fg-on-dark-muted:rgba(255,255,255,0.62);

  --accent:var(--ds-cognac);
  --hairline:rgba(30,30,30,0.10);
  --hairline-dark:rgba(255,255,255,0.14);
}

*{box-sizing:border-box;}

/* ---------- Slide base ---------- */
section{
  width:1280px;height:720px;
  background:var(--bg);
  color:var(--fg1);
  font-family:var(--font-body);
  position:relative;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
section.dark{background:var(--bg-deep);color:var(--fg-on-dark);}
section.cool{background:var(--bg-cool);color:var(--fg-on-dark);}
section.ice{background:var(--bg-soft);}

/* ---------- Ribbon chrome (interior slides) ---------- */
.ribbon{
  position:absolute;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 56px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg2);
}
.ribbon--top{top:32px;}
.ribbon--bottom{bottom:32px;}
section.dark .ribbon,section.cool .ribbon{color:rgba(255,255,255,0.6);}
.ribbon__left{display:flex;gap:28px;align-items:center;}
.ribbon__right{display:flex;gap:16px;align-items:center;}
.ribbon__sep{opacity:0.5;}
.ribbon__num{color:var(--fg1);font-weight:600;}
section.dark .ribbon__num,section.cool .ribbon__num{color:var(--ds-bianco);}

/* ---------- Typography helpers (slide-scale @ 1280×720) ---------- */
.s-eyebrow{
  font-family:var(--font-display);font-weight:500;font-size:12px;
  letter-spacing:0.20em;text-transform:uppercase;color:var(--accent);
  margin:0;
}
.s-eyebrow--neutral{color:var(--fg2);}
section.dark .s-eyebrow--neutral{color:rgba(255,255,255,0.55);}

.s-h1{
  font-family:var(--font-display);font-weight:600;
  font-size:54px;line-height:1.05;letter-spacing:-0.02em;
  color:var(--fg1);margin:0;text-wrap:balance;
}
section.dark .s-h1,section.cool .s-h1{color:var(--fg-on-dark);}
.s-h1 em{font-style:italic;font-weight:500;color:var(--fg2);}
section.dark .s-h1 em,section.cool .s-h1 em{color:rgba(255,255,255,0.75);}
.s-h1 .accent{color:var(--accent);font-style:italic;font-weight:500;}

.s-h2{
  font-family:var(--font-display);font-weight:600;
  font-size:38px;line-height:1.12;letter-spacing:-0.02em;
  color:var(--fg1);margin:0;text-wrap:balance;
}
section.dark .s-h2,section.cool .s-h2{color:var(--fg-on-dark);}
.s-h2 em{font-style:italic;font-weight:500;color:var(--fg2);}
section.dark .s-h2 em,section.cool .s-h2 em{color:rgba(255,255,255,0.75);}

.s-h3{
  font-family:var(--font-display);font-weight:500;
  font-size:22px;line-height:1.25;letter-spacing:-0.015em;
  color:var(--fg1);margin:0;
}
section.dark .s-h3,section.cool .s-h3{color:var(--fg-on-dark);}

.s-body{
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  color:var(--fg2);margin:0;max-width:60ch;
}
section.dark .s-body,section.cool .s-body{color:rgba(255,255,255,0.72);}

.s-caption{
  font-family:var(--font-display);font-weight:500;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--fg2);
}
section.dark .s-caption,section.cool .s-caption{color:rgba(255,255,255,0.55);}

.s-quote{
  font-family:var(--font-body);font-style:italic;
  font-size:22px;line-height:1.4;color:var(--fg1);margin:0;
  text-wrap:pretty;
}
section.dark .s-quote{color:rgba(255,255,255,0.88);}

/* ---------- Image wrapper (no-crop) ---------- */
.img-keep{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
}
.img-cover{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}

/* ---------- Buttons / CTA ---------- */
.cta-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;
  background:var(--accent);color:var(--ds-bianco);
  font-family:var(--font-display);font-weight:500;font-size:15px;
  letter-spacing:0.02em;
  text-decoration:none;
  border:0;border-radius:0;
}
.cta-text{
  font-family:var(--font-display);font-weight:500;font-size:15px;
  color:var(--ds-bianco);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  text-decoration:none;
}

/* ---------- Numbers (slide 8) ---------- */
.big-num{
  font-family:var(--font-display);font-weight:500;
  font-size:140px;line-height:0.9;letter-spacing:-0.05em;
  color:var(--fg-on-dark);
}
.big-num sup{
  font-size:60px;font-weight:400;
  color:rgba(255,255,255,0.55);
  top:-58px;margin-right:6px;letter-spacing:-0.04em;
}
.big-num .pct{
  font-size:72px;color:rgba(255,255,255,0.55);margin-left:6px;
}

/* ---------- Hairline divider ---------- */
.hairline{height:1px;background:var(--hairline);width:100%;border:0;margin:0;}
section.dark .hairline,section.cool .hairline{background:var(--hairline-dark);}

/* ---------- "Materiale fornito dal cliente" tag ---------- */
.mb-tag{
  display:inline-block;
  font-family:var(--font-display);font-weight:500;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);
  padding:0;
}

/* ---------- Play affordance (slide 7) ---------- */
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex;align-items:center;justify-content:center;
  color:var(--ds-antracite);
  font-family:var(--font-display);font-weight:500;font-size:24px;
  letter-spacing:0;text-transform:none;
  transition:transform 240ms cubic-bezier(0.2,0.6,0.2,1),background 240ms;
}
.play::before{
  content:"";display:block;width:0;height:0;
  border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent var(--ds-antracite);
  margin-left:6px;
}
.video-card{position:relative;display:block;text-decoration:none;color:inherit;cursor:pointer;}
.video-card:hover .play{background:var(--ds-bianco);}
.video-card .v-meta{
  position:absolute;left:16px;bottom:16px;
  font-family:var(--font-display);font-weight:500;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ds-bianco);
  background:rgba(0,0,0,0.55);padding:6px 10px;
}

/* ---------- Continuous-scroll layout ---------- */
html,body{margin:0;padding:0;background:#000;}
.deck-scroll{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px,1.6vw,24px);
  padding:clamp(8px,1.6vw,24px);
  min-height:100vh;
  background:#000;
}
.deck-frame{
  width:100%;
  max-width:1280px;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  background:#000;
}
.deck-frame > section{
  position:absolute;top:0;left:0;
  transform-origin:top left;
  /* transform: scale(...) set by inline script */
}
/* No paginazione in scroll mode */
.deck-frame .ribbon--bottom .ribbon__right{display:none;}