/*
Theme Name: Dino Brentali
Author: Nikk
Description: Sito per l'insegnante di canto Dino Brentali.
Version: 1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dinobrentali
*/

:root{
  --ink:#14151b;
  --ink-2:#1c1e26;
  --paper:#f3ece0;
  --paper-dim:#c9c2b4;
  --gold:#c89b3c;
  --gold-soft:#e7c877;
  --wine:#8a4238;
  --mist:#33353f;
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; scroll-behavior:auto !important;}
}
::selection{ background:var(--gold); color:var(--ink); }

.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold);
  display:inline-block;
}

h1,h2,h3{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; }
em{ font-style:italic; color:var(--gold-soft); font-weight:400; }
a{color:inherit;}

.wrap{ max-width:1180px; margin:0 auto; padding:0 6vw; }

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 6vw;
  mix-blend-mode:difference;
  color:#fff;
  font-family:'Space Mono',monospace;
  font-size:0.78rem;
  letter-spacing:0.08em;
}
header.nav .logo{ font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; font-weight:500; text-decoration:none; }
header.nav nav{ display:flex; gap:2rem; }
header.nav nav a{ text-decoration:none; opacity:0.85; }
header.nav nav a:hover, header.nav nav a.active{ opacity:1; }

/* ---------- WAVEFORM DIVIDER ---------- */
.waveform{
  display:flex; align-items:center; justify-content:center;
  gap:3px; height:46px; width:100%; overflow:hidden;
  padding:0 6vw;
}
.waveform .bar{
  width:2.5px; min-width:2.5px;
  background:var(--gold);
  opacity:0.55;
  border-radius:2px;
  animation:sing 2.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes sing{
  0%,100%{ transform:scaleY(0.18); }
  50%{ transform:scaleY(1); }
}
.waveform.quiet .bar{ opacity:0.28; }

/* ---------- FEATHERED IMAGES ---------- */
/* every photo fades softly into the background instead of a hard rectangular edge */
.feather{
  -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 58%, transparent 100%);
  border:none !important;
}
.feather-wide{
  -webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 80% at 50% 50%, #000 55%, transparent 100%);
  border:none !important;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  padding:7rem 6vw 4.5rem;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(200,155,60,0.14), transparent 55%),
    var(--ink);
  border-bottom:1px solid var(--mist);
}
.hero-photo{
  position:absolute; top:0; right:0; height:100%; width:52%;
  overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 20%;
  filter:grayscale(1) contrast(1.08) brightness(0.75);
  mix-blend-mode:luminosity;
  opacity:0.85;
}
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(20,21,27,0.15) 38%, rgba(20,21,27,0.55) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 30%);
}
.hero-content{ position:relative; z-index:2; max-width:720px; }
.hero-content .eyebrow{ margin-bottom:1.4rem; }
.hero-content h1{
  font-size:clamp(1.9rem, 4.4vw, 3.5rem);
  line-height:1.12;
  color:var(--paper);
  text-wrap:balance;
}
.hero-content h1 em{ display:block; margin-top:0.35em; }
.hero-content p.lede{
  margin-top:1.5rem; max-width:40em;
  font-size:1.02rem; line-height:1.65; color:var(--paper-dim);
  font-weight:400;
}
.hero-cta{
  margin-top:2.4rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.95rem 1.6rem;
  border:1px solid var(--gold);
  color:var(--paper);
  text-decoration:none;
  transition:all .25s ease;
  border-radius:var(--radius);
}
.btn.solid{ background:var(--gold); color:var(--ink); }
.btn.solid:hover{ background:var(--gold-soft); }
.btn:not(.solid):hover{ background:rgba(200,155,60,0.12); }

/* ---------- PAGE HEADER (Chi sono) ---------- */
.page-hero{
  padding:9rem 6vw 3.5rem;
  border-bottom:1px solid var(--mist);
  background:radial-gradient(120% 90% at 20% 0%, rgba(200,155,60,0.12), transparent 55%), var(--ink);
}
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero h1{ font-size:clamp(2.4rem,6vw,4rem); color:var(--paper); }

/* ---------- SECTION SHELL ---------- */
section{ padding:6.5rem 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(2rem,4vw,2.9rem); margin-top:0.6rem; color:var(--paper); }

/* ---------- BIO (Chi sono page) ---------- */
.bio{ background:var(--ink); }
.bio-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; align-items:center; }
.bio-grid p{ color:var(--paper-dim); font-size:1.03rem; margin-bottom:1.2rem; }
.bio-grid p:first-of-type{ color:var(--paper); font-size:1.18rem; font-family:'Fraunces',serif; font-weight:400; line-height:1.5;}
.bio-photo{ position:relative; }
.bio-photo img{ width:100%; display:block; }
@media (max-width:860px){ .bio-grid{ grid-template-columns:1fr; gap:2.5rem; } .bio-grid{direction:ltr;} }

/* ---------- CREDENTIALS (Chi sono page) ---------- */
.credentials{ background:var(--ink-2); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); }
.cred-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--mist); border:1px solid var(--mist); }
.cred-card{
  background:var(--ink-2); padding:2.4rem 2rem;
  display:flex; flex-direction:column; gap:0.9rem;
}
.cred-card .num{ font-family:'Space Mono',monospace; color:var(--gold); font-size:0.78rem; letter-spacing:0.1em; }
.cred-card h3{ font-size:1.35rem; color:var(--paper); font-weight:500; }
.cred-card p{ color:var(--paper-dim); font-size:0.94rem; }
.cred-card p.note{ color:var(--gold-soft); font-size:0.86rem; border-left:2px solid var(--gold); padding-left:0.9rem; margin-top:0.4rem; }
@media (max-width:860px){ .cred-grid{ grid-template-columns:1fr; } }

.cred-duo{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.6rem; align-items:start; }
.cred-duo figure{ margin:0; }
.cred-duo img{ width:100%; display:block; }
.cred-duo figcaption{ font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.06em; color:var(--paper-dim); margin-top:0.7rem; text-align:center; }
@media (max-width:760px){ .cred-duo{ grid-template-columns:1fr; } }

/* ---------- TICKER ---------- */
.ticker-wrap{
  background:var(--ink);
  padding:3rem 0;
  border-bottom:1px solid var(--mist);
  overflow:hidden;
  white-space:nowrap;
}
.ticker-track{ display:inline-flex; animation:scroll-left 32s linear infinite; }
.ticker-track span{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:1.7rem; color:var(--paper-dim);
  padding:0 2.2rem;
  display:inline-flex; align-items:center; gap:2.2rem;
}
.ticker-track span::after{ content:"—"; color:var(--gold); font-style:normal; }
@keyframes scroll-left{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ---------- TESTIMONIAL ---------- */
.testimonial{
  background:radial-gradient(80% 120% at 20% 0%, rgba(138,66,56,0.18), transparent 60%), var(--ink);
  text-align:center;
}
.testimonial blockquote{
  max-width:820px; margin:0 auto;
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.4;
  color:var(--paper);
}
.testimonial blockquote::before{ content:"\201C"; color:var(--gold); }
.testimonial blockquote::after{ content:"\201D"; color:var(--gold); }
.testimonial cite{
  display:block; margin-top:1.8rem; font-style:normal;
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--paper-dim);
}
.quote-photo{
  width:150px; height:150px; object-fit:cover; object-position:50% 25%;
  margin:0 auto 2.2rem; display:block;
  filter:grayscale(0.6) contrast(1.05);
}

/* ---------- STUDENTS / VIDEO ---------- */
.students{ background:var(--ink); border-top:1px solid var(--mist); }
.students-grid{ display:grid; grid-template-columns:1fr 0.8fr; gap:4rem; align-items:center; }
.video-frame{ position:relative; border:1px solid var(--mist); background:#000; }
.video-frame::before{ content:""; position:absolute; top:-1px; left:-1px; width:38px; height:2px; background:var(--gold); z-index:2; }
.video-frame video{ width:100%; display:block; }
@media (max-width:860px){ .students-grid{ grid-template-columns:1fr; gap:2.5rem; } }

/* ---------- LOCATIONS ---------- */
.locations{ background:var(--ink); }
.loc-band{ margin-bottom:3rem; }
.loc-band img{ width:100%; height:32vh; min-height:220px; object-fit:cover; object-position:50% 45%; display:block; filter:grayscale(0.45); }
.loc-list{ display:flex; flex-direction:column; }
.loc-row{
  display:grid; grid-template-columns:1fr 2fr 1fr;
  gap:1.5rem; padding:1.8rem 0;
  border-top:1px solid var(--mist); align-items:center;
}
.loc-list .loc-row:last-child{ border-bottom:1px solid var(--mist); }
.loc-row .city{ font-family:'Fraunces',serif; font-size:1.6rem; color:var(--paper); }
.loc-row .desc{ color:var(--paper-dim); font-size:0.95rem; }
.loc-row .place{ font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--gold); text-align:right; letter-spacing:0.04em; }
@media (max-width:700px){ .loc-row{ grid-template-columns:1fr; gap:0.4rem; } .loc-row .place{ text-align:left; } }

/* ---------- CONTACT / FOOTER ---------- */
.contact{ background:var(--ink-2); border-top:1px solid var(--mist); text-align:center; }
.contact h2{ font-size:clamp(2.2rem,5.5vw,3.6rem); color:var(--paper); }
.contact p{ color:var(--paper-dim); max-width:36em; margin:1.2rem auto 0; }
.contact-info{
  display:flex; justify-content:center; gap:2rem; flex-wrap:wrap;
  margin:1.8rem 0 2.4rem;
  font-family:'Space Mono',monospace; font-size:0.9rem; letter-spacing:0.03em;
}
.contact-info a{ text-decoration:none; color:var(--gold-soft); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.contact-info a:hover{ border-color:var(--gold-soft); }
.contact .btn.solid{ padding:1.15rem 2.4rem; font-size:0.85rem; }

footer{
  background:var(--ink); padding:2.4rem 6vw; border-top:1px solid var(--mist);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-family:'Space Mono',monospace; font-size:0.72rem; color:var(--paper-dim); letter-spacing:0.04em;
}

/* fade-in on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ================= SPECTACULAR ANIMATIONS ================= */

/* page load fade */
body{ opacity:0; }
body.loaded{ opacity:1; transition:opacity .6s ease; }

/* nav: solidify on scroll */
header.nav{ transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease; }
header.nav.scrolled{
  mix-blend-mode:normal;
  background:rgba(20,21,27,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mist);
  padding-top:1.05rem; padding-bottom:1.05rem;
}
header.nav nav a{ position:relative; padding-bottom:4px; }
header.nav nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s cubic-bezier(.4,0,.2,1);
}
header.nav nav a:hover::after, header.nav nav a.active::after{ right:0; }

/* hero staggered entrance */
.hero-content .eyebrow,
.hero-content h1,
.hero-content p.lede,
.hero-content .hero-cta{
  opacity:0; transform:translateY(26px);
  animation:heroIn .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-content .eyebrow{ animation-delay:.15s; }
.hero-content h1{ animation-delay:.32s; }
.hero-content p.lede{ animation-delay:.55s; }
.hero-content .hero-cta{ animation-delay:.75s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

.hero-photo img{ transform:scale(1.12); animation:heroPhotoIn 1.6s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes heroPhotoIn{ to{ transform:scale(1); } }

/* buttons: fill sweep */
.btn{ position:relative; overflow:hidden; z-index:0; }
.btn::before{
  content:""; position:absolute; inset:0;
  background:var(--gold); transform:translateX(-101%);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn:hover::before{ transform:translateX(0); }
.btn:hover{ color:var(--ink); }
.btn.solid::before{ background:var(--gold-soft); }
.btn.solid{ color:var(--ink); }

.contact .btn.solid{ animation:glowPulse 2.6s ease-in-out infinite; }
@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,155,60,0.35); }
  50%{ box-shadow:0 0 0 14px rgba(200,155,60,0); }
}

/* richer scroll reveal */
.reveal{
  opacity:0; transform:translateY(34px) scale(.97);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
.reveal.in{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* stagger children of grids when the parent reveals */
.reveal.stagger > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal.stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal.stagger.in > *:nth-child(2){ transition-delay:.18s; }
.reveal.stagger.in > *:nth-child(3){ transition-delay:.31s; }
.reveal.stagger.in > *:nth-child(4){ transition-delay:.44s; }
.reveal.stagger.in > *:nth-child(5){ transition-delay:.57s; }

/* waveform traveling wave */
.waveform .bar{ animation-name:sing; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }

/* tilt-on-hover photos */
.tilt{ transform-style:preserve-3d; transition:transform .15s ease-out; will-change:transform; }
.tilt img{ transition:transform .5s ease; }
.tilt:hover img{ transform:scale(1.045); }

/* parallax hook */
.parallax{ will-change:transform; }

/* ticker: fade at edges + pause on hover */
.ticker-wrap{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{ transition:color .3s ease; }
.ticker-track span:hover{ color:var(--gold-soft); }

/* floating quote photo */
.quote-photo{ animation:float 5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* video frame: subtle glow sweep on reveal */
.video-frame{ position:relative; overflow:hidden; }
.video-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(231,200,119,0.25) 50%, transparent 70%);
  transform:translateX(-120%);
  opacity:0;
}
.video-frame.swept::after{ animation:sweep 1.3s ease-out forwards; }
@keyframes sweep{
  0%{ transform:translateX(-120%); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translateX(120%); opacity:0; }
}

/* locations rows: slide in from left, staggered */
.loc-row{ opacity:0; transform:translateX(-24px); transition:opacity .6s ease, transform .6s ease; }
.loc-row.in{ opacity:1; transform:translateX(0); }

/* page hero (chi sono) entrance */
.page-hero .eyebrow, .page-hero h1{
  opacity:0; transform:translateY(24px);
  animation:heroIn .8s cubic-bezier(.16,1,.3,1) forwards;
}
.page-hero .eyebrow{ animation-delay:.1s; }
.page-hero h1{ animation-delay:.28s; }

@media (prefers-reduced-motion: reduce){
  body{ opacity:1; }
  .hero-content *, .hero-photo img, .page-hero *{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ================= EVEN MORE SPECTACULAR ================= */

/* page transition overlay */
.page-transition{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;
}
.page-transition.active{ opacity:1; pointer-events:all; }

/* cursor spotlight in hero */
.hero{ overflow:hidden; }
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,30%), rgba(231,200,119,0.10), transparent 60%);
  pointer-events:none;
  transition:background .1s ease-out;
}

/* magnetic buttons */
.btn{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .2s ease; }

/* waveform ripple response */
.waveform .bar{ transition:transform .15s ease-out; }

/* animated corner accents on credential cards */
.cred-card{ position:relative; overflow:hidden; }
.cred-card::before{
  content:""; position:absolute; top:0; left:0; width:0; height:2px;
  background:var(--gold); transition:width .6s cubic-bezier(.16,1,.3,1);
}
.cred-card::after{
  content:""; position:absolute; bottom:0; right:0; width:0; height:2px;
  background:var(--gold); transition:width .6s cubic-bezier(.16,1,.3,1) .15s;
}
.cred-card:hover::before, .reveal.in .cred-card::before{ width:100%; }
.cred-card:hover::after, .reveal.in .cred-card::after{ width:100%; }
.cred-card{ transition:background .3s ease; }
.cred-card:hover{ background:var(--ink); }

/* logo subtle shimmer on load */
header.nav .logo{
  background:linear-gradient(100deg, var(--paper) 40%, var(--gold-soft) 50%, var(--paper) 60%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 3.5s ease-in-out .8s 1;
}
@keyframes shimmer{
  0%{ background-position:150% 0; }
  100%{ background-position:-50% 0; }
}

/* eyebrow line grows in rather than just fading */
.eyebrow::before{
  width:0; animation:growLine .6s ease-out .3s forwards;
}
@keyframes growLine{ to{ width:22px; } }

@media (prefers-reduced-motion: reduce){
  .hero::before{ display:none; }
  header.nav .logo{ animation:none; background:none; color:var(--paper); }
  .eyebrow::before{ animation:none; width:22px; }
}