/* =========================================================
   MARCO MAIOLINO — HIGH PRODUCTIVE DENTISTRY
   Design tokens — v1
   ========================================================= */

:root {
  /* ---------- COLORS — Brand ---------- */
  --color-brand-900: #062f63;
  --color-brand-800: #094389;
  --color-brand-700: #0d56a8;   /* PRIMARY — logo blue */
  --color-brand-600: #2a6fb8;
  --color-brand-500: #4a87c5;
  --color-brand-400: #7ba5d3;
  --color-brand-300: #adc4e0;
  --color-brand-200: #d6e1ee;
  --color-brand-100: #eef2f8;   /* "Blu polvere" — soft background */
  --color-brand-50:  #f6f8fc;

  /* ---------- COLORS — Accent (Ottone scuro) ---------- */
  --color-accent-900: #6b4e10;
  --color-accent-800: #8f6918;
  --color-accent-700: #b07f1f;
  --color-accent-600: #c8932b;   /* PRIMARY CTA gold — "Acquista" */
  --color-accent-500: #d6a648;
  --color-accent-300: #e9c98a;
  --color-accent-100: #f7eed7;
  --color-accent-50:  #fbf7ec;

  /* ---------- COLORS — Neutrals (premium warm grey) ---------- */
  --color-ink:       #0f1419;     /* near-black for headings */
  --color-ink-soft:  #1d242e;
  --color-neutral-900: #1d242e;
  --color-neutral-800: #2c3542;
  --color-neutral-700: #3a4453;   /* secondary text */
  --color-neutral-600: #515b6c;
  --color-neutral-500: #6c7686;   /* muted */
  --color-neutral-400: #9099a8;
  --color-neutral-300: #c8ced9;   /* hairline borders */
  --color-neutral-200: #dfe3ea;
  --color-neutral-150: #e8ebf1;
  --color-neutral-100: #f0f2f6;
  --color-neutral-50:  #f7f8fb;
  --color-white:     #ffffff;

  /* ---------- COLORS — Semantic ---------- */
  --color-success-700: #1b6d3f;
  --color-success-500: #2e9e60;
  --color-success-100: #e3f5ea;
  --color-warning-700: #8a5a07;
  --color-warning-500: #d18b14;
  --color-warning-100: #fbf0d6;
  --color-danger-700:  #962119;
  --color-danger-500:  #c8362b;
  --color-danger-100:  #fae0dd;
  --color-info-700:    #0d56a8;
  --color-info-500:    #2a6fb8;
  --color-info-100:    #eef2f8;

  /* ---------- COLORS — Semantic aliases ---------- */
  --bg-page:        var(--color-white);
  --bg-subtle:      var(--color-brand-100);
  --bg-elevated:    var(--color-white);
  --bg-inverse:     var(--color-ink);
  --text-primary:   var(--color-ink);
  --text-secondary: var(--color-neutral-700);
  --text-muted:     var(--color-neutral-500);
  --text-inverse:   var(--color-white);
  --text-link:      var(--color-brand-700);
  --border-subtle:  var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --focus-ring:     0 0 0 3px rgba(13, 86, 168, 0.28);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale (modular ~1.25, anchored at 16px body) */
  --fs-display: 80px;     /* hero claims */
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;     /* uppercase labels */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrows + uppercase headings */
  --tracking-widest:  0.18em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADIUS ---------- */
  --r-none: 0;
  --r-sm:   4px;        /* buttons, inputs */
  --r-md:   8px;        /* cards */
  --r-lg:   12px;       /* modal, large cards */
  --r-xl:   20px;
  --r-full: 999px;      /* pills, avatars */

  /* ---------- SHADOWS (premium soft) ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 3px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 4px 10px rgba(15, 20, 25, 0.05), 0 2px 4px rgba(15, 20, 25, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 20, 25, 0.10), 0 4px 10px rgba(15, 20, 25, 0.06);
  --shadow-xl: 0 24px 60px rgba(15, 20, 25, 0.14), 0 8px 20px rgba(15, 20, 25, 0.08);
  --shadow-brand: 0 12px 28px rgba(13, 86, 168, 0.18);
  --shadow-focus: 0 0 0 3px rgba(13, 86, 168, 0.28);

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad: 32px;
  --header-h:     88px;

  --bp-mobile:  375px;
  --bp-tablet:  768px;
  --bp-desktop: 1280px;

  --t-fast: 160ms;
  --t-base: 220ms;
  --t-slow: 320ms;
  --t-cine: 900ms;
  --t-stage: 1400ms;
  --ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);        /* cinematic */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);        /* premium ease */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-out-sine: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-anticip:   cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --z-header:  50;
  --z-overlay: 90;
  --z-modal:   100;
  --z-toast:   120;
}

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }

/* Selection */
::selection { background: var(--color-brand-700); color: #fff; }

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

/* =========================================================
   TYPOGRAPHY CLASSES
   ========================================================= */
.t-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-700);
}

.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); }
.t-h1      { font-size: var(--fs-h1); }
.t-h2      { font-size: var(--fs-h2); }
.t-h3      { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-h4      { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-bold); }

.t-heading-upper {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.t-caption { font-size: var(--fs-caption); color: var(--text-muted); }
.t-mono    { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--sm { height: 36px; padding: 0 14px; font-size: 12px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 14px; }
.btn--block { width: 100%; }

/* Primary — brand blue */
.btn--primary {
  background: var(--color-brand-700);
  color: #fff;
}
.btn--primary:hover { background: var(--color-brand-800); box-shadow: var(--shadow-brand); }

/* Secondary — outline blue */
.btn--secondary {
  background: transparent;
  color: var(--color-brand-700);
  border-color: var(--color-brand-700);
}
.btn--secondary:hover { background: var(--color-brand-100); }

/* Gold — high-prominence commerce CTA */
.btn--gold {
  background: var(--color-accent-600);
  color: #1a1304;
}
.btn--gold:hover { background: var(--color-accent-700); color: #fff; }

/* Ghost — minimal link button */
.btn--ghost {
  color: var(--text-primary);
  background: transparent;
  padding: 0 12px;
}
.btn--ghost:hover { color: var(--color-brand-700); }

/* On dark (hero) */
.btn--on-dark { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--on-dark:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* =========================================================
   BADGES
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border: 1px solid var(--color-neutral-200);
}
.badge--brand   { background: var(--color-brand-100); color: var(--color-brand-800); border-color: var(--color-brand-200); }
.badge--gold    { background: var(--color-accent-100); color: var(--color-accent-900); border-color: var(--color-accent-300); }
.badge--success { background: var(--color-success-100); color: var(--color-success-700); border-color: #c0e7cd; }
.badge--warning { background: var(--color-warning-100); color: var(--color-warning-700); border-color: #f2dca5; }
.badge--danger  { background: var(--color-danger-100); color: var(--color-danger-700); border-color: #f1c0bc; }
.badge--dark    { background: var(--color-ink); color: #fff; border-color: transparent; }
.badge--sq      { border-radius: var(--r-sm); }

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card--hover:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--color-brand-200);
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__hint  { font-size: var(--fs-caption); color: var(--text-muted); }
.field__error { font-size: var(--fs-caption); color: var(--color-danger-700); }

.input, .textarea, .select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--color-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-none);   /* sharp inputs — clinical */
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  outline: none;
}
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-neutral-500); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--color-brand-700); box-shadow: var(--shadow-focus); }
.input--error { border-color: var(--color-danger-500); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(200,54,43,0.25); }

/* Checkbox / Radio */
.check {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.check__box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-neutral-400);
  border-radius: 3px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast) var(--ease);
}
.check input { display: none; }
.check input:checked + .check__box {
  background: var(--color-brand-700);
  border-color: var(--color-brand-700);
}
.check input:checked + .check__box::after {
  content: "";
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check--radio .check__box { border-radius: 50%; }
.check--radio input:checked + .check__box::after {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; border: none; transform: none;
}

/* Toggle */
.toggle { position: relative; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__track {
  position: absolute; inset: 0;
  background: var(--color-neutral-300);
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease);
  cursor: pointer;
}
.toggle__track::after {
  content: "";
  position: absolute; left: 2px; top: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease);
}
.toggle input:checked + .toggle__track { background: var(--color-brand-700); }
.toggle input:checked + .toggle__track::after { transform: translateX(20px); }

/* =========================================================
   AVATAR
   ========================================================= */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-brand-700);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
}
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--xl { width: 96px; height: 96px; font-size: 28px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress { width: 100%; height: 4px; background: var(--color-neutral-150); border-radius: 999px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--color-brand-700); border-radius: inherit; transition: width var(--t-slow) var(--ease); }
.progress--gold .progress__fill { background: var(--color-accent-600); }
.progress--lg { height: 8px; }

/* =========================================================
   ALERTS / TOASTS
   ========================================================= */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid;
  background: var(--color-neutral-50);
  font-size: var(--fs-body-sm);
}
.alert--success { background: var(--color-success-100); border-color: var(--color-success-500); color: var(--color-success-700); }
.alert--warning { background: var(--color-warning-100); border-color: var(--color-warning-500); color: var(--color-warning-700); }
.alert--danger  { background: var(--color-danger-100);  border-color: var(--color-danger-500);  color: var(--color-danger-700); }
.alert--info    { background: var(--color-info-100);    border-color: var(--color-info-500);    color: var(--color-info-700); }
.alert__title   { font-weight: var(--fw-bold); margin: 0 0 2px; }

/* =========================================================
   SITE HEADER (shared)
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: var(--z-header);
  display: flex; align-items: center;
  background: transparent;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header--scrolled,
.site-header--solid {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: rgba(15, 20, 25, 0.08);
  box-shadow: 0 1px 0 rgba(15, 20, 25, 0.04), 0 8px 24px rgba(15, 20, 25, 0.05);
}
.site-header__inner {
  width: 100%; max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-header__logo { display: flex; align-items: center; gap: 12px; }
.site-header__logo img { height: 34px; width: auto; transition: height var(--t-base) var(--ease); }
.site-header--scrolled .site-header__logo img,
.site-header--solid .site-header__logo img { height: 30px; }
.site-header__nav { display: flex; gap: 32px; }
.site-header__nav a {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color var(--t-fast) var(--ease);
  position: relative;
  padding: 4px 0;
}
.site-header__nav a:hover { color: var(--color-brand-700); }
.site-header__nav a.is-active { color: var(--color-brand-700); }
.site-header__nav a.is-active::after {
  content: ""; position: absolute; bottom: -8px; left: 0; right: 0;
  height: 2px; background: var(--color-brand-700);
}
.site-header__cta { display: flex; align-items: center; gap: 8px; }

/* When header is over a dark hero */
.site-header:not(.site-header--scrolled):not(.site-header--solid) .site-header__nav a,
.site-header:not(.site-header--scrolled):not(.site-header--solid) .site-header__logo {
  color: #fff;
}
.site-header:not(.site-header--scrolled):not(.site-header--solid) .site-header__nav a:hover { color: var(--color-accent-500); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  background: var(--color-ink);
  color: rgba(255,255,255,0.7);
  padding: 96px 0 0;
  font-size: var(--fs-body-sm);
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(13,86,168,0.22), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(13,86,168,0.10), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.site-footer::after {
  content: "MAIOLINO";
  position: absolute;
  left: 50%; bottom: -8%;
  transform: translateX(-50%);
  font-size: clamp(120px, 22vw, 320px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.025);
  line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}
.site-footer h5 {
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
  font-weight: var(--fw-bold);
}
.site-footer a {
  color: rgba(255,255,255,0.65);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
  display: inline-block;
}
.site-footer a:hover { color: #fff; padding-left: 6px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer__bottom {
  padding: 24px 0;
  margin-top: 0;
  background: rgba(0,0,0,0.2);
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left: calc(var(--container-pad) * -1);
  margin-right: calc(var(--container-pad) * -1);
  padding-top: 24px;
}
.site-footer__brand img { height: 30px; margin-bottom: 20px; filter: brightness(0) invert(1); }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* =========================================================
   UTILITY
   ========================================================= */
.hairline { height: 1px; background: var(--border-subtle); width: 100%; }
.cluster { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack-1 { display: flex; flex-direction: column; gap: 4px; }
.stack-2 { display: flex; flex-direction: column; gap: 8px; }
.stack-3 { display: flex; flex-direction: column; gap: 12px; }
.stack-4 { display: flex; flex-direction: column; gap: 16px; }
.stack-5 { display: flex; flex-direction: column; gap: 24px; }
.stack-6 { display: flex; flex-direction: column; gap: 32px; }
.stack-7 { display: flex; flex-direction: column; gap: 48px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --fs-display: 56px;
    --fs-h1: 40px;
    --fs-h2: 32px;
    --container-pad: 24px;
  }
}
@media (max-width: 640px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-body-lg: 16px;
    --container-pad: 20px;
    --header-h: 64px;
  }
  .site-header__nav { display: none; }
}

/* =========================================================
   PLACEHOLDER IMAGE TREATMENT
   Used where real clinical photography will go later.
   ========================================================= */
.ph {
  position: relative;
  background: linear-gradient(135deg, #0a3a72 0%, #0d56a8 45%, #1a6ec5 100%);
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  padding: 16px;
  text-align: center;
}
.ph--warm { background: linear-gradient(135deg, #2c3542 0%, #515b6c 60%, #3a4453 100%); }
.ph--gold { background: linear-gradient(135deg, #8f6918 0%, #c8932b 50%, #b07f1f 100%); }
.ph--light { background: linear-gradient(135deg, #d6e1ee 0%, #eef2f8 100%); }
.ph--light::after { color: rgba(13,86,168,0.55); }
.ph svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.18; }

/* =========================================================
   CINEMATIC SYSTEM
   ========================================================= */

/* ---- Film grain overlay ---- */
.cine-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grain 1200ms steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, -3%); }
  50%  { transform: translate(2%, 1%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---- Vignette ---- */
.cine-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.45) 100%);
}

/* ---- Ken Burns slow zoom ---- */
@keyframes kenburns-zoom-in {
  0%   { transform: scale(1.06) translate3d(0,0,0); }
  100% { transform: scale(1.18) translate3d(-2%, -1%, 0); }
}
@keyframes kenburns-zoom-out {
  0%   { transform: scale(1.20) translate3d(1%, 1%, 0); }
  100% { transform: scale(1.06) translate3d(0,0,0); }
}
@keyframes kenburns-pan-r {
  0%   { transform: scale(1.12) translate3d(-2%, 0, 0); }
  100% { transform: scale(1.12) translate3d(2%, 0, 0); }
}
.cine-kb-in    { animation: kenburns-zoom-in   22s var(--ease-in-out-sine) infinite alternate; }
.cine-kb-out   { animation: kenburns-zoom-out  20s var(--ease-in-out-sine) infinite alternate; }
.cine-kb-pan-r { animation: kenburns-pan-r     24s var(--ease-in-out-sine) infinite alternate; }

/* ---- Reveal on scroll ----
   Base state is the "before-reveal" hidden state.
   When the .reveal element gains .is-in, animates to its rest state. */
.reveal {
  opacity: 0;
  transition:
    opacity 900ms var(--ease-out-expo),
    transform 1100ms var(--ease-out-expo),
    filter 1200ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal-up      { transform: translate3d(0, 48px, 0); }
.reveal-down    { transform: translate3d(0, -36px, 0); }
.reveal-left    { transform: translate3d(-56px, 0, 0); }
.reveal-right   { transform: translate3d(56px, 0, 0); }
.reveal-zoom    { transform: scale(0.94); }
.reveal-blur    { filter: blur(14px); transform: translate3d(0, 24px, 0); }
.reveal-rise    { transform: translate3d(0, 80px, 0) rotateX(8deg); transform-origin: center bottom; }
.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  filter: blur(0);
}
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }
.reveal-d5 { transition-delay: 420ms; }
.reveal-d6 { transition-delay: 520ms; }

/* ---- Image mask reveal (soft wipe) ---- */
@keyframes mask-wipe-up {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.reveal-mask {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1400ms var(--ease-out-expo);
}
.reveal-mask.is-in { clip-path: inset(0 0 0 0); }

/* ---- Cinematic image base ---- */
.cine-img {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink);
}
.cine-img__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  filter: saturate(0.78) contrast(1.06) brightness(0.92);
  transition: filter var(--t-slow) var(--ease-out-quart), transform var(--t-cine) var(--ease-out-quart);
}
.cine-img:hover .cine-img__bg {
  filter: saturate(1) contrast(1.1) brightness(1);
  transform: scale(1.04);
}
/* Duotone tint layer */
.cine-img__tint {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(6,15,30,0.10) 0%, rgba(6,47,99,0.20) 60%, rgba(6,15,30,0.55) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- Soft section transitions (mask edges) ---- */
.section-mask-top {
  position: relative;
}
.section-mask-top::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(180deg, var(--bg-page) 0%, transparent 100%);
  pointer-events: none; z-index: 2;
}
.section-mask-bot::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(0deg, var(--bg-page) 0%, transparent 100%);
  pointer-events: none; z-index: 2;
}

/* ---- Parallax helper ---- 
   Element uses --px / --py custom properties driven by JS;
   transform is composed here for smoothness. */
.parallax {
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  transition: transform 700ms var(--ease-out-quart);
  will-change: transform;
}

/* ---- Counter ramp (visible-on-reveal number) ---- */
@keyframes count-rise {
  0%   { opacity: 0; transform: translate3d(0, 24px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.cine-num.is-in { animation: count-rise 900ms var(--ease-out-expo) both; }

/* ---- Marquee strip (subtle background motion) ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cine-kb-in, .cine-kb-out, .cine-kb-pan-r,
  .cine-grain { animation: none !important; }
  .reveal, .reveal-mask, .parallax { transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal-mask { clip-path: none !important; }
}