/* ===== Casale di Montecarotto — palette collina/tramonto Verdicchio ===== */
:root{
  --ink:#15140f;
  --ink-2:#1d1b14;
  --cream:#f3ecdf;
  --cream-dim:#cfc6b3;
  --gold:#c9a24b;
  --gold-bright:#e6c579;
  --terracotta:#b5654a;
  --verde:#4b5e45;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Work Sans', -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--cream);
  overflow-x:hidden;
  min-height:100vh;
}

.noise-svg{position:fixed; inset:0; width:100%; height:100%; opacity:.05; pointer-events:none; z-index:999; mix-blend-mode:overlay;}

a{color:inherit; text-decoration:none;}
.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; font-weight:500; color:var(--gold-bright); margin-bottom:1rem;
}
h1,h2{font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em;}
.muted{color:var(--cream-dim);}

/* ===================== GATE ===================== */
.gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.gate-bg{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.mesh{
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 50% at 18% 15%, rgba(201,162,75,.35), transparent 60%),
    radial-gradient(55% 55% at 85% 20%, rgba(181,101,74,.30), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(75,94,69,.40), transparent 65%),
    linear-gradient(180deg, #1d1b14 0%, #15140f 55%, #100f0b 100%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.08) translate(-2%, 1%);}
}
.fireflies{position:absolute; inset:0;}
.firefly{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 0 8px 2px rgba(230,197,121,.9);
  opacity:0; animation:fly linear infinite;
}
@keyframes fly{
  0%{opacity:0; transform:translateY(0) translateX(0);}
  10%{opacity:.9;}
  90%{opacity:.7;}
  100%{opacity:0; transform:translateY(-90vh) translateX(30px);}
}

.gate-card{
  position:relative;
  width:100%; max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(230,197,121,.22);
  backdrop-filter:blur(18px);
  border-radius:2px;
  padding:3rem 2.5rem 2.25rem;
  text-align:center;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.6);
  animation:card-in 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes card-in{
  from{opacity:0; transform:translateY(18px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.crest{color:var(--gold); margin-bottom:1.1rem; display:flex; justify-content:center;}
.gate-card h1{font-size:2rem; color:var(--cream); margin-bottom:.6rem;}
.gate-sub{font-size:.85rem; color:var(--cream-dim); margin-bottom:2.2rem; line-height:1.5;}

.gate-form{display:flex; flex-direction:column; gap:1.1rem;}
.field{position:relative; text-align:left;}
.field input{
  width:100%; background:rgba(0,0,0,.2);
  border:1px solid rgba(230,197,121,.28);
  color:var(--cream); font-family:var(--sans); font-size:.95rem;
  padding:1.1rem .9rem .5rem; border-radius:1px; outline:none;
  transition:border-color .25s ease, background .25s ease;
}
.field input:focus{border-color:var(--gold-bright); background:rgba(0,0,0,.35);}
.field label{
  position:absolute; left:.9rem; top:1.05rem;
  font-size:.95rem; color:var(--cream-dim); pointer-events:none;
  transition:all .2s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:.35rem; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-bright);
}

.gate-btn{
  margin-top:.4rem;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#20190a; font-family:var(--sans); font-weight:600; font-size:.9rem;
  letter-spacing:.04em; text-transform:uppercase;
  border:none; padding:1rem 1.4rem; border-radius:1px; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.gate-btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(201,162,75,.6);}
.gate-btn svg{transition:transform .25s ease;}
.gate-btn:hover svg{transform:translateX(3px);}

.gate-error{
  display:none; color:#e0897a; font-size:.8rem; margin-top:-.3rem;
}
.gate.shake .gate-card{animation:shake .4s ease;}
.gate.show-error .gate-error{display:block;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(7px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(3px);}
}

.gate-footnote{margin-top:1.8rem; font-size:.72rem; color:rgba(207,198,179,.55);}

.gate.hidden{display:none;}

/* ===================== TRANSIZIONE (iris reveal) ===================== */
.reveal{
  position:fixed; inset:0; z-index:60;
  background:radial-gradient(circle at var(--ox,50%) var(--oy,50%), var(--gold-bright) 0%, var(--gold) 22%, transparent 60%);
  clip-path:circle(0% at var(--ox,50%) var(--oy,50%));
  pointer-events:none;
  opacity:0;
}
.reveal.playing{
  animation:iris 1.15s cubic-bezier(.65,0,.2,1) forwards;
}
@keyframes iris{
  0%{clip-path:circle(0% at var(--ox,50%) var(--oy,50%)); opacity:1;}
  55%{clip-path:circle(75% at var(--ox,50%) var(--oy,50%)); opacity:1;}
  100%{clip-path:circle(150% at var(--ox,50%) var(--oy,50%)); opacity:0;}
}

/* ===================== CONTENUTO ===================== */
.content{background:var(--ink); min-height:100vh;}
.content.entering .hero-copy > *{animation:rise .9s cubic-bezier(.16,1,.3,1) both;}
.content.entering .hero-copy > *:nth-child(1){animation-delay:.05s;}
.content.entering .hero-copy > *:nth-child(2){animation-delay:.15s;}
.content.entering .hero-copy > *:nth-child(3){animation-delay:.25s;}
.content.entering .hero-copy > *:nth-child(4){animation-delay:.35s;}
@keyframes rise{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}

.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 5vw; background:rgba(21,20,15,.75); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(230,197,121,.12);
}
.brand{font-family:var(--serif); font-size:1.15rem; letter-spacing:.01em;}
.site-nav{display:flex; gap:2rem; font-size:.82rem; letter-spacing:.03em;}
.site-nav a{color:var(--cream-dim); transition:color .2s;}
.site-nav a:hover{color:var(--gold-bright);}

.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  padding:0 5vw 6vw;
}
.hero-media{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.hero-media video{width:100%; height:100%; object-fit:cover;}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--ink) 5%, rgba(21,20,15,.35) 55%, rgba(21,20,15,.15) 100%);
}
.hero-copy{max-width:640px;}
.hero-copy h1{font-size:clamp(2.2rem, 5vw, 3.6rem); margin-bottom:1.2rem; color:var(--cream);}
.hero-sub{font-size:1.05rem; color:var(--cream-dim); line-height:1.6; margin-bottom:2rem; max-width:52ch;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.6rem; font-size:.85rem; letter-spacing:.03em;
  border-radius:1px; font-weight:500; transition:all .25s ease;
}
.btn-primary{background:var(--gold-bright); color:#20190a;}
.btn-primary:hover{background:var(--gold); transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(230,197,121,.45); color:var(--cream);}
.btn-ghost:hover{background:rgba(230,197,121,.1); border-color:var(--gold-bright);}

.split{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; min-height:70vh;
}
.split.reverse{grid-template-columns:1fr 1.1fr;}
.split.reverse .split-media{order:2;}
.split-media{position:relative; min-height:420px;}

/* ---- gallerie a griglia (casa / bnb) ---- */
.split-gallery{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:6px;
  min-height:460px;
  background:var(--ink-2);
}
.split-gallery img{width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; transition:transform .5s ease, filter .4s ease;}
.split-gallery img:hover{transform:scale(1.03); filter:brightness(1.08);}
.split-gallery img.g-main{grid-column:1 / 3; grid-row:1 / 3;}
.split-gallery img:nth-of-type(2){grid-column:3; grid-row:1;}
.split-gallery img:nth-of-type(3){grid-column:4; grid-row:1;}
.split-gallery img:nth-of-type(4){grid-column:3; grid-row:2;}
.split-gallery img:nth-of-type(5){grid-column:4; grid-row:2;}
.g-more{
  position:absolute; right:14px; bottom:14px; z-index:2;
  background:rgba(21,20,15,.72); backdrop-filter:blur(6px);
  color:var(--cream); border:1px solid rgba(230,197,121,.4);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.55rem .9rem; cursor:pointer; transition:background .2s, border-color .2s;
}
.g-more:hover{background:rgba(0,0,0,.85); border-color:var(--gold-bright);}

.territorio-media{max-width:960px; margin:0 auto 3.5rem; border:1px solid rgba(230,197,121,.18);}
.territorio-media img{width:100%; display:block;}

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(9,8,6,.94);
  display:flex; align-items:center; justify-content:center; padding:5vw;
  animation:fade-in .25s ease both;
}
.lightbox[hidden]{display:none;}
.content[hidden]{display:none;}
.gate.hidden{display:none;}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
.lightbox img{max-width:88vw; max-height:84vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:none; border:none; color:var(--cream);
  cursor:pointer; font-size:2rem; line-height:1; padding:.6rem;
  transition:color .2s, transform .2s;
}
.lb-close{top:1.2rem; right:1.5rem; font-size:1.4rem;}
.lb-prev{left:1rem; top:50%; transform:translateY(-50%);}
.lb-next{right:1rem; top:50%; transform:translateY(-50%);}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:var(--gold-bright);}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px);}
.lb-next:hover{transform:translateY(-50%) translateX(3px);}

@media (max-width:820px){
  .split-gallery{grid-template-columns:repeat(2,1fr); grid-template-rows:auto; min-height:auto;}
  .split-gallery img.g-main{grid-column:1/3; grid-row:auto; aspect-ratio:16/10;}
  .split-gallery img:nth-of-type(n+2){aspect-ratio:1/1; grid-column:auto; grid-row:auto;}
}
.split-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:5vw 6vw; background:var(--ink-2);
}
.split-copy h2{font-size:clamp(1.7rem, 3vw, 2.4rem); margin-bottom:1.2rem; color:var(--cream);}
.split-copy p{color:var(--cream-dim); line-height:1.7; margin-bottom:1rem; max-width:46ch;}
.facts{list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:.6rem;}
.facts li{color:var(--cream); font-size:.92rem; padding-left:1.3rem; position:relative;}
.facts li::before{content:'—'; position:absolute; left:0; color:var(--gold);}

.territorio{padding:7vw 5vw; text-align:center;}
.territorio h2{font-size:clamp(1.8rem,3vw,2.6rem); max-width:20ch; margin:0 auto 3.5rem;}
.territorio-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1.5rem; max-width:960px; margin:0 auto;
}
.terr-card{
  border:1px solid rgba(230,197,121,.18); padding:2.2rem 1rem;
  display:flex; flex-direction:column; gap:.6rem; align-items:center;
  transition:border-color .3s, transform .3s;
}
.terr-card:hover{border-color:var(--gold-bright); transform:translateY(-4px);}
.terr-num{font-family:var(--serif); font-size:1.6rem; color:var(--gold-bright);}

.site-footer{
  text-align:center; padding:8vw 5vw 5vw; border-top:1px solid rgba(230,197,121,.12);
}
.site-footer h2{font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:1rem;}
.site-footer p{margin-bottom:2rem;}

/* placeholder per media non ancora forniti */
.placeholder-media{
  background:
    repeating-linear-gradient(135deg, rgba(230,197,121,.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #2a2620, #171510);
  display:flex; align-items:center; justify-content:center;
}
.placeholder-tag{
  font-size:.78rem; letter-spacing:.04em; color:var(--cream-dim);
  border:1px dashed rgba(230,197,121,.35); padding:.6rem 1rem;
}

@media (max-width:820px){
  .split, .split.reverse{grid-template-columns:1fr;}
  .split.reverse .split-media{order:0;}
  .split-media{min-height:280px;}
  .site-nav{display:none;}
}