/* =====================================================================
   BEACH VILLAGE — «Dal relax al divertimento» (06/10/2026)
   La calma del rooftop, la svolta in lettere che saltano, i dati in grande,
   uno scivolo disegnato che scende allo scroll dietro ai due capitoli,
   il timbro che gira «Un plus incluso nel soggiorno».
   ===================================================================== */

/* ---------- la calma ---------- */
.bcalm { background: var(--warm); padding-top: clamp(6rem, 13vw, 11rem); }
.bcalm__text { max-width: 28ch; margin-inline: auto; text-align: center; font: 300 clamp(1.8rem, 3.6vw, 3.4rem)/1.18 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.bcalm__photo { position: relative; height: clamp(22rem, 72vh, 48rem); margin-top: clamp(4rem, 8vw, 7rem); overflow: hidden; }
.bcalm__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

/* ---------- la svolta ---------- */
.bturn { position: relative; overflow: hidden; isolation: isolate; background: var(--teal); color: var(--white); padding-block: clamp(6rem, 13vw, 11rem); }
.bturn .pwave__lines { stroke: rgba(255,255,255,.12); }
.bturn__big { max-width: 17ch; font: 200 clamp(2.8rem, 7vw, 7rem)/1 var(--font-display); letter-spacing: -.04em; }
.bturn__text { max-width: 36ch; margin: clamp(3rem, 6vw, 5rem) 0 0 0; font: 300 clamp(1.4rem, 2.4vw, 2.2rem)/1.3 var(--font-display); color: var(--white); }

/* ---------- dati ---------- */
.bfacts__unit { font-size: .4em; color: var(--sand); letter-spacing: 0; }
.pfacts .pfacts__big--word { overflow-wrap: anywhere; }

/* ---------- nastro ---------- */
.bmarq { background: var(--sand-pale); border-block: 0; }
.bmarq span { color: var(--teal); }

/* ---------- lo scivolo ---------- */
.bslide { position: relative; background: var(--warm); padding-block: clamp(6rem, 12vw, 10rem); overflow: hidden; view-timeline: --slide block; }
.bslide__path { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.bslide__path path { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.bslide__ghost { stroke: rgba(33,108,120,.12); stroke-width: 26; }
.bslide__line { stroke: var(--teal); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bslide__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: clamp(8rem, 18vw, 16rem); }
.bslide__chap { position: relative; padding: clamp(2rem, 4vw, 3.5rem); background: var(--white); box-shadow: var(--shadow); }
.bslide__chap--1 { grid-column: 1 / 7; }
.bslide__chap--2 { grid-column: 7 / 13; grid-row: 2; }
.bslide__num { font: 200 clamp(3.4rem, 6vw, 5.6rem)/.85 var(--font-display); letter-spacing: -.05em; color: var(--sand); margin-bottom: 1.4rem; }
.bslide__title { font: 200 clamp(2.2rem, 4.2vw, 4rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin-bottom: 1.4rem; }
.bslide__chap p:last-child { font-size: 1.06rem; line-height: 1.8; color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bslide__line { stroke-dashoffset: 1; animation: slideDraw linear both; animation-timeline: --slide; animation-range: entry 20% exit 60%; }
    @keyframes slideDraw { to { stroke-dashoffset: 0; } }
  }
}

/* ---------- un plus incluso nel soggiorno ---------- */
.bplus { background: var(--sand-pale); padding-block: clamp(6rem, 12vw, 10rem); }
.bplus__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.bplus__stamp { position: relative; width: min(100%, 22rem); aspect-ratio: 1; display: grid; place-items: center; }
.bplus__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bplus__stamp text { font: 500 12.4px var(--font-display); letter-spacing: .32em; text-transform: uppercase; fill: var(--teal-deep); }
.bplus__stamp > i { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--teal); color: var(--white); font-size: clamp(2.6rem, 4vw, 3.6rem); }
@media (prefers-reduced-motion: no-preference) {
  .bplus__stamp svg { animation: bplusSpin 26s linear infinite; }
  @keyframes bplusSpin { to { transform: rotate(360deg); } }
}
.bplus__title { font: 500 .78rem/1.3 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.6rem; }
.bplus__big { font: 200 clamp(2.4rem, 5vw, 5rem)/1.04 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.bplus__big b { font-weight: 400; color: var(--teal); }
.bplus__p { max-width: 44ch; margin-top: clamp(1.8rem, 3vw, 2.6rem); font-size: 1.1rem; line-height: 1.8; color: var(--grey); }

/* ---------- foto Shutterstock d'atmosfera (06/10/2026) ---------- */
/* la svolta: la bambina con la mano tesa a destra del testo */
.bturn__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bturn__grid > p { grid-column: 1; }
.bturn__ph { grid-column: 2; grid-row: 1 / span 2; }
.bturn__ph figure, .bslide__ph figure { margin: 0; overflow: hidden; background: var(--teal-deep); box-shadow: var(--shadow); }
.bturn__ph figure { aspect-ratio: 4 / 5; }
.bturn__ph img, .bslide__ph img, .bplus__ph img, .bdive__img img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bturn__ph img { object-position: 28% 50%; }

/* il tuffo */
.bdive { position: relative; background: var(--teal-deep); view-timeline: --dive block; }
.bdive__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.bdive__img { position: absolute; inset: 0; z-index: -2; }
.bdive__light { position: absolute; inset: -20%; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .45;
  background: radial-gradient(40% 18% at 30% 30%, rgba(255,255,255,.55), transparent 70%), radial-gradient(30% 14% at 70% 60%, rgba(255,255,255,.4), transparent 70%),
              radial-gradient(26% 12% at 45% 80%, rgba(255,255,255,.35), transparent 70%); }
.bdive__cap { font: 200 clamp(3.2rem, 10vw, 10rem)/.9 var(--font-display); letter-spacing: -.045em; color: var(--white); text-shadow: 0 6px 40px rgba(15,58,65,.45); text-align: center; }

/* lo scivolo: le foto accanto ai capitoli */
.bslide__ph--1 { grid-column: 8 / 13; grid-row: 1; align-self: center; }
.bslide__ph--1 figure { aspect-ratio: 4 / 3; }
.bslide__duo { grid-column: 1 / 7; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.bslide__ph--tall figure { aspect-ratio: 4 / 5; }
.bslide__ph--low { margin-top: clamp(5rem, 12vw, 10rem); }
.bslide__ph--low figure { aspect-ratio: 1; }
.bslide__ph--low img { object-position: 50% 30%; }
.bslide__chap { z-index: 1; }

/* il plus: la mano che spruzza con il timbro sull'angolo */
.bplus__visual { position: relative; }
.bplus__ph { aspect-ratio: 1; overflow: hidden; box-shadow: var(--shadow); }
.bplus__visual .bplus__stamp { position: absolute; right: -14%; bottom: -12%; width: 52%; background: var(--sand-pale); border-radius: 50%; }

@media (prefers-reduced-motion: no-preference) {
  .bdive__light { animation: bdiveLight 9s ease-in-out infinite alternate; }
  @keyframes bdiveLight { 0% { transform: translate(-3%, -2%) scale(1); } 50% { transform: translate(4%, 3%) scale(1.08); } 100% { transform: translate(-2%, 4%) scale(.96); } }
  @supports (animation-timeline: view()) {
    .bdive { height: 200vh; }
    .bdive__stage { position: sticky; top: 0; }
    .bdive__img img { animation: bdiveFocus linear both; animation-timeline: --dive; animation-range: contain 0% contain 60%; }
    @keyframes bdiveFocus { from { filter: blur(16px) saturate(1.3) brightness(1.1); transform: scale(1.35); } to { filter: blur(0) saturate(1) brightness(1); transform: scale(1); } }
    .bdive__cap { animation: bdiveCap linear both; animation-timeline: --dive; animation-range: contain 15% contain 60%; }
    @keyframes bdiveCap { from { opacity: 0; transform: scale(.82); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
  }
}

@media (max-width: 899px) {
  .bslide__chap--1, .bslide__chap--2 { grid-column: 1 / -1; grid-row: auto; }
  .bturn__grid { grid-template-columns: 1fr; } .bturn__ph { grid-column: 1; grid-row: auto; margin-top: 3rem; }
  .bslide__ph--1, .bslide__duo { grid-column: 1 / -1; grid-row: auto; }
  .bplus__visual { width: 82%; }
  .bplus__visual .bplus__stamp { width: 9rem; right: -10%; }
}
@media (max-width: 899px) {
  .bslide__chap--1, .bslide__chap--2 { grid-column: 1 / -1; grid-row: auto; }
  .bslide__inner { row-gap: 7rem; }
  .bplus__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .bplus__stamp { width: 13rem; }
  .pfacts .pfacts__big--word { font-size: clamp(1.4rem, 6vw, 2rem); }
}

/* ---------- sul mare: la finestra che si allarga fino a tutto schermo ---------- */
.bsea { position: relative; background: var(--teal); view-timeline: --bsea block; }
.bsea__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; }
.bsea__win { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.bsea__win img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bsea__win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,58,65,0) 40%, rgba(15,58,65,.55)); }
.bsea__cap { position: relative; z-index: 1; align-self: end; margin-bottom: clamp(3rem, 10vh, 7rem); text-align: center;
  font: 200 clamp(2.8rem, 8vw, 8rem)/.95 var(--font-display); letter-spacing: -.04em; color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bsea { height: 230vh; }
    .bsea__stage { position: sticky; top: 0; }
    .bsea__win, .bsea__win img, .bsea__win::after { animation-timeline: --bsea; animation-fill-mode: both; animation-timing-function: cubic-bezier(.37, 0, .25, 1); }
    .bsea__win { animation-name: bseaOpen; animation-range: contain 0% contain 70%; }
    @keyframes bseaOpen { from { clip-path: inset(24vh 32vw 24vh 32vw); } to { clip-path: inset(0 0 0 0); } }
    .bsea__win img { animation-name: bseaZoom; animation-range: contain 0% contain 70%; }
    @keyframes bseaZoom { from { transform: scale(1.35); } to { transform: scale(1); } }
    .bsea__win::after { animation-name: bseaShade; animation-range: contain 40% contain 75%; }
    @keyframes bseaShade { from { opacity: 0; } to { opacity: 1; } }
    /* la scritta arriva quando la finestra è già mezza aperta */
    .bsea__cap { animation: bseaShade linear both; animation-timeline: --bsea; animation-range: contain 35% contain 60%; }
  }
}
@media (max-width: 899px) {
  @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
    @keyframes bseaOpen { from { clip-path: inset(28vh 14vw 28vh 14vw); } to { clip-path: inset(0 0 0 0); } }
  } }
}