/* ============ Escola de Música Cristina Blasi — light theme: base, layers, nav, hero, acts ============ */
:root {
  /* ---- Brand palette (Brand Guidelines 2024, p.17) ---- */
  --brand-deep:  #012b3a;   /* CMYK 96/71/73/56 */
  --brand-teal:  #02455d;   /* CMYK 97/67/43/30 */
  --brand-coral: #fb9478;   /* CMYK  0/52/50/0  */
  --brand-paper: #fff4ef;   /* CMYK  0/ 4/ 4/0  */
  --brand-black: #231f20;

  /* Neutrals: the brand's warmth is a *blush*, not a tan. Everything stays in
     the #FFF4EF family so the page reads as clean paper, never parchment. */
  --bg: #fffaf7;            /* page — the blush lifted one step, so paper panels read on it */
  --bg-soft: var(--brand-paper);
  --bg-card: #ffffff;

  --ink: var(--brand-deep);
  --ink-dim: rgba(1, 43, 58, 0.62);
  --ink-faint: rgba(1, 43, 58, 0.32);

  /* Coral is a *spot* colour: display type, hairlines and marks. Small text and
     large fills are navy — that restraint is what keeps the guidelines clean. */
  --accent: var(--brand-coral);
  --accent-ink: #ef7f66;    /* a touch denser, for display type on paper */
  --accent-dim: rgba(251, 148, 120, 0.4);

  --deep: var(--brand-deep);
  --deep-2: #012b3a;
  --hairline-ink: rgba(1, 43, 58, 0.1);
  --hairline-cream: rgba(255, 244, 239, 0.16);

  --font-heading: "Montserrat", -apple-system, sans-serif;
  --font-drama: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --piano-h: clamp(110px, 18vh, 170px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* No scroll-behavior: smooth here. ScrollTrigger adjusts the scroll position
   itself when a pin releases, and that rule turns those adjustments into ~0.2s
   animations — which is what made the page lurch and drift back on arriving at
   "Classes". Anchor links get their smoothness from js/main.js instead. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fixed background — clean daylight. The old wash stacked two yellow-tan
   radials over a #f4ecdb base, which is what read as parchment; this keeps the
   warmth but holds it inside the blush family and lets a breath of the brand
   teal do the shading instead of ochre. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 70% at 78% 16%, #ffffff, transparent 66%),
    radial-gradient(ellipse 65% 55% at 6% 96%, rgba(2, 69, 93, 0.05), transparent 62%),
    linear-gradient(180deg, #fffdfc 0%, var(--bg) 55%, var(--brand-paper) 100%);
}

/* The 3D stage sits above the gradient, below all content */
#stage {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
body.no3d #stage { display: none; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
::selection { background: var(--accent); color: var(--deep-2); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.loader-inner { text-align: center; }
.loader-logo { width: clamp(64px, 10vw, 92px); margin: 0 auto 1.4rem; }
.loader-text {
  font-family: var(--font-drama); font-style: italic;
  color: var(--ink-dim); letter-spacing: 0.05em; font-size: 0.95rem;
}
.loader-line {
  width: 120px; height: 1px; margin: 1.6rem auto 0;
  background: var(--hairline-ink); position: relative; overflow: hidden;
}
.loader-line::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--accent);
  animation: loader-sweep 1.1s ease-in-out infinite;
}
@keyframes loader-sweep { from { transform: translateX(-120%); } to { transform: translateX(300%); } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--pad-x);
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.nav.scrolled {
  background: rgba(255, 250, 247, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 0.6rem var(--pad-x);
  box-shadow: 0 1px 0 var(--hairline-ink);
}
.nav-logo { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.nav-logo img { width: 36px; height: auto; flex: none; }
/* the school name reads as one line — it is the brand, and a wrapped name in
   the corner reads as two unrelated fragments */
.nav-logo span {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(0.74rem, 1.15vw, 0.95rem);
  letter-spacing: 0.005em; line-height: 1.15; white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-size: 0.88rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--ink-dim); position: relative; padding: 0.3rem 0;
  transition: color 0.3s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .nav-cta {
  color: var(--brand-deep); background: var(--accent); padding: 0.5rem 1.25rem;
  border-radius: 99px; font-weight: 700;
  transition: filter 0.3s ease, transform 0.3s ease;
}
.nav-links .nav-cta::after { display: none; }
.nav-links .nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--deep-2); }

.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; position: relative; z-index: 60;
}
.nav-burger span {
  display: block; width: 24px; height: 2px; background: var(--ink);
  margin: 5px auto; transition: transform 0.35s ease;
}
.nav-burger.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Mobile menu overlay ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(255, 250, 247, 0.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center; gap: 3rem;
  padding: var(--pad-x);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.menu-overlay-links { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; }
.menu-overlay-links a {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(2rem, 8vw, 3rem);
  display: flex; align-items: baseline; gap: 1rem;
}
.menu-overlay-links em {
  font-family: var(--font-body); font-style: normal; font-size: 0.85rem;
  color: var(--accent); letter-spacing: 0.1em;
}
.menu-overlay-foot { color: var(--ink-dim); font-size: 0.85rem; letter-spacing: 0.04em; }

/* ---------- Acts (pinned viewport scenes) ---------- */
.act { position: relative; z-index: 2; min-height: 100svh; }

/* Without the 3D journey, acts collapse to readable sections */
body:not(.journey) .act-approach { display: none; }
body:not(.journey) #escola, body:not(.journey) #metode { min-height: 0; padding: 16vh 0; }

/* ---------- Hero (piano at the right, words on the empty wall at the left) ---------- */
.hero { padding: 0 var(--pad-x); }
.hero-brand {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: var(--pad-x); max-width: 640px; text-align: left;
}
.hero-overline {
  font-size: clamp(0.68rem, 1.3vw, 0.78rem); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 1.4rem; font-weight: 600; font-family: var(--font-heading);
  display: flex; align-items: center; gap: 0.85rem;
}
/* the coral is the rule, not the letters — small coral type on paper is both
   low-contrast and the main source of the "muddy" cast */
.hero-overline::before {
  content: ""; width: 28px; height: 2px; background: var(--accent); flex: none;
}
.hero-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.1rem, 4.8vw, 3.9rem);
  line-height: 1.07; letter-spacing: -0.02em; margin-bottom: 1rem;
}
.hero-tag {
  font-family: var(--font-drama); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); color: var(--ink-dim);
}
.hero-tag em { color: var(--accent-ink); }

.hero-vision {
  position: absolute; left: var(--pad-x); top: 50%; transform: translateY(-50%);
  max-width: 480px; text-align: left;
}
/* The whole block starts hidden, not just its children: on mobile .hero-vision
   carries a paper card, and hiding only the children left an empty white
   rectangle sitting over the piano until the vision act began. */
body.journey .hero-vision,
body.journey .hero-vision > * { opacity: 0; }
.vision-line {
  display: block; font-family: var(--font-drama); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.3;
}
.vision-line.accent { color: var(--accent-ink); margin-bottom: 1.1rem; }
.hero-sub {
  font-size: clamp(0.95rem, 1.7vw, 1.05rem); line-height: 1.65;
  color: var(--ink-dim); margin-bottom: 2rem; font-weight: 300; max-width: 40ch;
}
.hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hero-address {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-drama); font-style: italic; font-size: 0.98rem;
  color: var(--ink-dim); transition: color 0.3s ease;
}
.hero-address svg { color: var(--accent); }
.hero-address:hover { color: var(--accent); }

.scroll-hint {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  color: var(--ink-dim); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: hint-drop 2.2s ease-in-out infinite;
}
@keyframes hint-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 0.85rem 1.8rem; border-radius: 99px;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em;
  font-family: var(--font-heading);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease,
    border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--brand-deep); color: var(--brand-paper); }
/* hover lifts within the navy rather than crossing to teal, so every dark
   control on the page is the one colour */
.btn-solid:hover { background: #02384a; }
.btn-ghost { border: 1px solid rgba(1, 43, 58, 0.22); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Section labels ---------- */
.section-num {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 0.9rem; font-weight: 600; font-family: var(--font-heading);
}
.section-num::before {
  content: ""; width: 22px; height: 2px; background: var(--accent); flex: none;
}

/* ---------- Value-proposition cards (acts 2 & 3) ---------- */
.value-act { display: flex; align-items: center; padding: 0 var(--pad-x); }
.value-card { max-width: 470px; margin-left: auto; }
body.journey .value-card > * { opacity: 0; }
.value-card h2 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.12;
  letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.value-card h2 em { font-family: var(--font-drama); font-weight: 500; color: var(--accent-ink); }
.value-card p {
  line-height: 1.75; color: var(--ink-dim); font-weight: 300;
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
}
/* In the metodologia act the camera is low and close, so the rug sweeps across
   the lower right of the frame and ran under this copy. Lift it clear — only on
   desktop; on mobile the card sits on its own paper panel at the bottom. */
@media (min-width: 761px) {
  .metode-card { transform: translateY(-7vh); }
}