/*
Theme Name: Bagnomaria
Theme URI: https://bagnomariacatania.it
Author: Francesco (per Studio Selvatico)
Description: Tema custom one-page per Bagnomaria su layout Studio Selvatico (Giulia): hero azzurra con finestra animata sul mare e bollino rotante, doppio marquee, fasce menù colorate. Menù PDF gestibili da Aspetto → Personalizza.
Version: 4.1.8
Requires at least: 6.0
Requires PHP: 7.4
License: proprietario
Text Domain: bagnomaria
*/

@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrument-serif-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Red Hat Text';src:url('assets/fonts/red-hat-text-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Red Hat Text';src:url('assets/fonts/red-hat-text-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Red Hat Text';src:url('assets/fonts/red-hat-text-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Red Hat Mono';src:url('assets/fonts/red-hat-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Red Hat Mono';src:url('assets/fonts/red-hat-mono-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Snake';src:url('assets/fonts/snake.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --crema:#E5DAC9;
  --azzurro:#8BAAD3;
  --nero:#2E2F31;
  --corallo:#E28F82;
  --lime:#CBC762;
  --marrone:#5C493B;
  --beige:#D6C9B3;          /* marquee basso */
  --blu-ante:#163B5F;       /* persiane della finestra */

  --serif:'Instrument Serif', serif;
  --sans:'Red Hat Text', system-ui, sans-serif;
  --mono:'Red Hat Mono', monospace;
  --snake:'Snake', cursive;
  --larghezza:1160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--crema);color:var(--nero);line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
svg{display:block}
.contenitore{max-width:var(--larghezza);margin:0 auto;padding:0 28px}

.mono{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.snake{font-family:var(--snake);font-weight:400}
.onda-brand{width:100%;height:auto}

/* barra di avanzamento */
.progresso{position:fixed;top:0;left:0;right:0;height:4px;z-index:99;background:var(--nero);transform:scaleX(0);transform-origin:left}

/* reveal allo scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =========================== HERO ============================ */
.hero{
  background:var(--azzurro);
  position:relative;overflow:hidden;
  padding:56px 24px 280px;
  text-align:center;
}
.hero .logo{
  width:min(560px,82vw);
  margin:0 auto 64px;position:relative;z-index:2;
}

.hero > *{position:relative}

/* onde della reference, agganciate alla finestra */
.onde-scena{
  position:absolute;
  left:-89.3%;top:18.9%;width:277%;
  max-width:none;
  z-index:0;pointer-events:none;
  opacity:.72;
}
.finestra{z-index:1}

/* --- finestra animata: ante chiuse -> apertura -> mare/video --- */
.scena{position:relative;display:inline-block;z-index:1}
.finestra{
  position:relative;
  width:min(460px,78vw);
  aspect-ratio:715/873;
  margin:0 auto;
  perspective:1100px;
  filter:drop-shadow(0 24px 50px rgba(22,59,95,.35));
}
.finestra .varco{
  position:absolute;
  left:26.42%;top:2.14%;width:48%;height:95.85%;
}
.finestra .varco video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.finestra .cornice{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:3;pointer-events:none;
}
/* persiane reali della foto: partono chiuse sul varco e si spalancano */
.finestra{perspective:1400px}
.finestra .persiana{
  position:absolute;
  top:2.29%;height:95.53%;
  z-index:4;
  transition:transform 2.2s cubic-bezier(.65,0,.3,1);
  will-change:transform;
  transform-style:preserve-3d;
}
.finestra .persiana img{width:100%;height:100%;object-fit:fill;display:block;backface-visibility:visible}
.finestra .persiana-sx{
  left:2.73%;width:23.85%;
  transform-origin:right center;
  transform:rotateY(180deg);
}
.finestra .persiana-dx{
  right:1.89%;width:23.85%;
  transform-origin:left center;
  transform:rotateY(-180deg);
  z-index:5;
}
.finestra.aperta .persiana-sx,
.finestra.aperta .persiana-dx{transform:rotateY(0)}

/* --- bollino rotante sovrapposto alla finestra --- */
.bollino{
  position:absolute;
  right:-124px;bottom:-29%;top:auto;
  width:230px;height:230px;
  z-index:6;
  pointer-events:none;
}
.bollino svg{width:100%;height:100%;animation:gira 28s linear infinite}
.bollino text{
  font-family:var(--serif);
  font-size:16.1px;
  fill:var(--nero);
}
.bollino text .corsivo{font-style:italic}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:700px){
  .bollino{width:150px;height:150px;right:-80px;bottom:-30%}
  .hero{padding-bottom:46vw}
  .finestra{width:min(460px,70vw)}
}

/* ========================== MARQUEE =========================== */
.marquee{overflow:hidden;padding:16px 0}
.marquee--corallo{background:var(--corallo)}
.marquee--azzurro{background:var(--azzurro)}
.marquee .binario{display:flex;width:max-content;animation:scorri 30s linear infinite}
.marquee:hover .binario{animation-play-state:paused}
.marquee .blocco{
  display:flex;align-items:center;
  font-family:var(--mono);font-weight:600;
  font-size:clamp(.85rem,1.8vw,1.05rem);
  letter-spacing:.24em;text-transform:uppercase;
  white-space:nowrap;
}
.marquee .blocco span{padding:0 .6em}
@keyframes scorri{to{transform:translateX(-50%)}}

/* ===================== INTRO "I NOSTRI MENÙ" ================== */
.intro-menu{background:var(--crema);padding:34px 0 64px;text-align:center;position:relative}
.intro-menu .etichette{
  display:flex;justify-content:space-between;
  padding:0 4px;margin-bottom:34px;
}
.intro-menu h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.12;
}
.intro-menu .testo{
  max-width:46em;margin:1.4em auto 0;
  font-size:.85rem;color:#5B554C;
}

/* ======================= FASCE MENÙ =========================== */
.fascia{
  --tinta:var(--azzurro);
  --inchiostro:var(--nero);
  background:var(--tinta);
  color:var(--inchiostro);
  position:relative;
  overflow:hidden;
}
.fascia--caffetteria{--tinta:var(--azzurro)}
.fascia--ombrellone{--tinta:var(--lime)}
.fascia--cocktail{--tinta:var(--corallo)}
.fascia--pizzeria{--tinta:var(--marrone);--inchiostro:var(--crema)}

.fascia .interno-fascia{
  max-width:var(--larghezza);margin:0 auto;
  padding:72px 28px 76px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:14px;
}

.fascia .pesce{
  width:auto;max-height:320px;max-width:min(420px,74vw);
  transition:transform .5s ease;
}
.fascia:hover .pesce{transform:rotate(-3deg)}

.fascia .contenuto{max-width:620px}
.fascia h3{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:.04em;
  line-height:1.1;
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:.35em;
}
.fascia h3 strong{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.85em;
  letter-spacing:0;
}
.fascia h3 .powered{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.62em;
  white-space:nowrap;
  opacity:.85;
}
.fascia p{font-size:clamp(.95rem,1.8vw,1.15rem);margin-top:.9em}
.fascia .azione{margin-top:1.9em}

.btn-menu{
  display:inline-block;
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--inchiostro);color:var(--tinta);
  text-decoration:none;
  padding:.9em 1.9em;
  transition:opacity .18s ease;
}
.btn-menu:hover{opacity:.85}
.btn-menu .freccia{display:inline-block;margin-left:.6em;transition:transform .2s ease}
.btn-menu:hover .freccia{transform:translateX(5px)}
.tag-presto{
  display:inline-block;
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--inchiostro);
  padding:.8em 1.6em;
  opacity:.85;
}

@media (max-width:760px){
  .fascia .interno-fascia{padding:52px 24px 60px;gap:28px}
  .fascia .pesce{max-height:220px}
}

/* ========================= FOOTER ============================ */
.sito-footer{
  background:var(--crema);color:var(--nero);
  padding:84px 0 44px;text-align:center;
}
.sito-footer .logo{width:min(420px,74vw);margin:0 auto 2em}
.sito-footer .info{font-size:.95rem}
.sito-footer .info span{display:block;margin:.25em 0}
.sito-footer .info a{text-decoration:none}
.sito-footer .info a:hover{text-decoration:underline}
.sito-footer .social{margin-top:1.8em}
.sito-footer .social a{
  font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;margin:0 1em;
}
.sito-footer .social a:hover{text-decoration:underline}
.sito-footer .legale{margin-top:3em;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#87817A}

/* contenuto generico */
.contenuto-pagina{padding:80px 0}
.contenuto-pagina h1{font-family:var(--serif);font-weight:400;font-size:2.4rem;margin-bottom:.6em}

/* ==================== ACCESSIBILITÀ/MOBILE =================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .finestra .persiana{transition:none}
  .bollino svg{animation:none}
  .marquee .binario{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .reveal{opacity:1;transform:none;transition:none}
  .fascia .pesce{transition:none}
  .progresso{display:none}
}