/* ================================================
   POLINO — Global Styles
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Manrope:wght@300;400;600&display=swap');
@import './variables.css';

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Every in-page link landed its section flush with the top of the viewport —
   which is underneath the fixed header, so the first 72px of each section were
   covered by it. One rule covers the desktop nav, the mobile menu, the hero
   quicknav, the footer nav and any shared #anchor link. */
section[id],
footer[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
  position: relative;
}

/* The emblem sprite carries no visible geometry of its own — it only holds the
   <symbol> that the header, footer and contact watermark reference. Pinned out
   of flow so it can never contribute a stray line box. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Ambient floating particles — site-wide background layer */
.bg-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Paper grain texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Corner vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-above);
  background: radial-gradient(ellipse at center, transparent 55%, rgba(38, 48, 31, 0.16) 100%);
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--olive-dark);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: clamp(var(--text-4xl), 7vw, var(--text-7xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-xl),  3vw, var(--text-3xl)); }
h4 { font-size: var(--text-2xl); }

p {
  line-height: var(--leading-loose);
  color: var(--text-light);
  max-width: 65ch;
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--terra);
}

.label-light { color: rgba(247, 241, 230, 0.7); }

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--olive-deep);
}

/* --- LAYOUT --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 1024px) { .container { padding-inline: var(--space-12); } }

.section { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); }

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.section-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

.divider {
  width: 48px;
  height: 2px;
  background: var(--terra);
}

.stars { color: var(--terra); letter-spacing: 2px; font-size: var(--text-lg); }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out),
    transform        var(--duration-fast) var(--ease-out),
    border-color     var(--duration-base) var(--ease-out);
  cursor: pointer;
  will-change: transform;
}
.btn:active        { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

.btn-primary       { background: var(--olive-deep); color: var(--white-mosaic); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--olive-dark); box-shadow: var(--shadow-terra); }

.btn-outline       { background: transparent; color: var(--terra); border: 1.5px solid var(--terra); }
.btn-outline:hover { background: var(--terra); color: var(--white-mosaic); }

.btn-ghost         { background: transparent; color: var(--white-mosaic); border: 1.5px solid rgba(247,241,230,0.4); }
.btn-ghost:hover   { background: rgba(247,241,230,0.1); border-color: var(--white-mosaic); }

/* --- SCROLL REVEAL ---
   The observer in main.js adds .visible once the element's leading edge has
   climbed past the bottom fifth of the viewport, so the movement happens where
   the eye already is. The shift is deliberately larger than a hairline: at the
   old 24px it read as nothing on a phone, where 24px is under 3% of the screen. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift)) scale(0.985);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--reveal-shift-sm));
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}
/* Every child shows; the nth-child rules only pace them. Written out to eight
   so a fifth list item can never be stranded at opacity 0. */
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.44s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.52s; }
.reveal-stagger.visible > *:nth-child(n+8) { transition-delay: 0.60s; }

/* Showpiece moment, used twice on the page on purpose: the photograph wipes up
   inside its frame while the block itself settles. The clip is on the <img>, so
   the frame keeps its own rotation, rounded corners and drop shadow. */
.reveal-wipe img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transition: clip-path var(--duration-wipe) var(--ease-out) 60ms,
              transform var(--duration-wipe) var(--ease-out) 60ms;
}
.reveal-wipe.visible img {
  clip-path: inset(0 0 0 0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .reveal, .reveal-stagger > * { opacity:1 !important; transform:none !important; }
  .reveal-wipe img { clip-path:none !important; transform:none !important; }
}

/* --- IMAGE PLACEHOLDER --- */
.img-placeholder {
  background: linear-gradient(135deg, var(--olive-dark), var(--teal-ocean));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247,241,230,0.3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}