/* =========================================================
   Polline — base.css
   Token di brand, reset, comportamenti responsive.
   I valori provengono dal design approvato: modificarli qui
   cambia il sito in ogni pagina.
   ========================================================= */

:root {
  --color-background: #FFF6EC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FFE7D2;
  --color-surface-soft-alt: #FFF0DF;
  --color-ink: #1A2B4A;
  --color-heading: #1A2B4A;
  --color-text-body: rgba(26,43,74,0.82);
  --color-text-muted: rgba(26,43,74,0.75);
  --color-text-subtle: rgba(26,43,74,0.6);
  --color-inverse: #FFF6EC;
  --color-inverse-muted: rgba(255,246,236,0.72);
  --color-accent: #E15A22;
  --color-accent-hover: #F6743B;
  --color-sky: #3AB3D9;
  --color-sky-shadow: #298CAB;
  --color-highlight: #FCDE3D;
  --color-highlight-shadow: #E3BB19;
  --color-shadow-neutral: #E8D6C2;
  --color-footer-link-hover: #FFC24B;
  --color-card-yellow: #F9DF5E;
  --color-card-pink: #FBA4C7;
  --color-card-purple: #AF94E3;
  --color-card-sand: #D6CDBE;
  --color-card-peach: #FBC68A;
  --color-media-pink: #F2A8C6;
  --color-media-blue: #60B1D5;
  --color-media-purple: #AA95DE;
  --color-media-sand: #D4CDC0;
  --color-media-peach: #F4C892;
  --color-quote-yellow: #FFEFC4;
  --color-quote-blue: #D9E9F5;
  --color-quote-green: #E3EEDD;
  --color-quote-blush: #F7DCD5;
}

/* Breakpoint usati nel progetto (riferimento):
   900px  → nav desktop / menu mobile, griglie a 2 colonne
   700px  → griglie a 3 colonne diventano 1 colonna
   1180px → illustrazioni decorative grandi / ridotte        */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-ink);
  font-family: Figtree, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
input, textarea, button { font-family: inherit; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 2px; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-ink); }

.site { overflow-x: hidden; }

/* ---------- caroselli orizzontali ---------- */
[data-rail] { -webkit-overflow-scrolling: touch; }
[data-rail]::-webkit-scrollbar { height: 8px; }
[data-rail]::-webkit-scrollbar-thumb { background: var(--color-surface-soft); border-radius: 999px; }
[data-rail]::-webkit-scrollbar-track { background: transparent; }

/* ---------- griglie: nel design le colonne erano calcolate in JS,
   qui sono classi con media query ---------- */
.grid-head  { grid-template-columns: 1.5fr 1fr; }
.grid-text  { grid-template-columns: 1fr 1.2fr; }
.grid-pair  { grid-template-columns: repeat(3, 1fr); }
.grid-cards { grid-template-columns: repeat(6, 1fr); }
.card-project.span-2 { grid-column: span 2; }
.card-project.span-3 { grid-column: span 3; }
.rail-item      { width: clamp(280px, 26vw, 360px); }
.rail-item-wide { width: clamp(480px, 44vw, 620px); }

.gc-1 { grid-template-columns: 1.35fr 0.75fr; }
@media (max-width: 899px) {
  .gc-1 { grid-template-columns: 1fr; }
}

.rw-2 { width: clamp(460px, 52vw, 700px); }
@media (max-width: 899px) {
  .rw-2 { width: min(86vw, 340px); }
}

.rw-3 { width: clamp(460px, 52vw, 700px); }
@media (max-width: 899px) {
  .rw-3 { width: min(86vw, 340px); }
}

.rw-4 { width: clamp(460px, 52vw, 700px); }
@media (max-width: 899px) {
  .rw-4 { width: min(86vw, 340px); }
}

.rw-5 { width: clamp(460px, 52vw, 700px); }
@media (max-width: 899px) {
  .rw-5 { width: min(86vw, 340px); }
}

.rw-6 { width: clamp(460px, 52vw, 700px); }
@media (max-width: 899px) {
  .rw-6 { width: min(86vw, 340px); }
}

/* ---------- visibilità per breakpoint (nav e blocchi alternativi) ---------- */
.only-desktop, .only-mobile, .art-roomy, .art-tight { display: contents; }
.only-mobile { display: none; }
.art-tight { display: none; }
.site-menu[hidden] { display: none; }

/* ---------- form contatti ---------- */
.motivo-pill { background: var(--color-surface); }
.motivo-pill:has(input:checked) { background: var(--color-surface-soft); border-color: var(--color-sky); }
.form-error[hidden], .form-sent[hidden] { display: none; }
.form-invalid { border-color: var(--color-accent-hover) !important; }

/* ---------- immagini non ancora fornite ---------- */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 10px, transparent 10px 20px),
    rgba(26,43,74,0.06);
}

/* ---------- reveal allo scroll (JS aggiunge data-revealed) ---------- */
[data-reveal] { will-change: opacity, transform; }

@media (max-width: 1179px) {
  .art-roomy { display: none; }
  .art-tight { display: contents; }
}

@media (max-width: 899px) {
  .only-desktop { display: none; }
  .only-mobile  { display: contents; }
  .grid-head, .grid-text, .grid-cards { grid-template-columns: 1fr; }
  .card-project.span-2, .card-project.span-3 { grid-column: span 1; }
  .rail-item      { width: min(74vw, 320px); }
  .rail-item-wide { width: min(88vw, 520px); }
}

@media (max-width: 699px) {
  .grid-pair { grid-template-columns: 1fr; }
}

/* ---------- animazioni ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hint-arrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(7px); }
  }
@keyframes float-tilt {
    0%   { transform: translateY(0) rotate(-3deg); }
    25%  { transform: translateY(-16px) rotate(1.5deg); }
    50%  { transform: translateY(-24px) rotate(4deg); }
    75%  { transform: translateY(-10px) rotate(0deg); }
    100% { transform: translateY(0) rotate(-3deg); }
  }
@keyframes marquee-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0, -22px) rotate(6deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}