/* =========================================================
   CALIBRE ON THE BEACH / CALIBRE ON THE CLUB — smaller formats
   ========================================================= */
.page-fmt{background:var(--cream)}

/* ============ hero ============ */
.fx-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  padding:130px var(--gutter) 130px;color:#fff}
.fx-hero-inner{position:relative;z-index:5;max-width:880px}
.fx-kicker{display:inline-block;padding:8px 18px;border-radius:999px;background:var(--ink);color:var(--cream);
  font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.fx-lockup{display:flex;flex-direction:column;align-items:center;margin-top:24px;animation:fxIn 1s var(--ease) .2s both}
.fx-lockup img{width:min(52vw,400px);height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.25))}
.fx-lockup span{margin-top:-4px;font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,6vw,4.4rem);line-height:1;letter-spacing:-.02em;
  text-shadow:0 6px 0 rgba(0,0,0,.15)}
.fx-title{margin:26px auto 10px;max-width:20ch;font-size:clamp(1.6rem,3.6vw,2.8rem);text-shadow:0 4px 24px rgba(0,0,0,.3)}
.fx-sub{max-width:48ch;margin:0 auto;font-weight:600;opacity:.95;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.fx-actions{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@keyframes fxIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.scene{position:absolute;inset:0;z-index:0;overflow:hidden}

/* beach scene: sunset sky, sinking sun, moving waves */
.scene-beach{background:linear-gradient(180deg,#f7a15e 0%,#f28a78 34%,#ed7990 62%,#f4a3a8 70%)}
.scene-beach::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:32%;background:linear-gradient(#45b1a6,#136b66)}
.sun{position:absolute;z-index:0;left:50%;top:64%;width:min(52vw,520px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff1c2 0 34%,#ffc978 52%,rgba(255,201,120,.35) 62%,rgba(255,201,120,0) 72%);
  transform:translate(-50%,-50%);animation:sunset 16s ease-in-out infinite alternate}
@keyframes sunset{from{top:58%}to{top:70%}}
.wave{position:absolute;z-index:2;left:0;width:200%;max-width:none;height:26%;animation:waveMove 14s linear infinite}
.wave.w1{bottom:16%;fill:#5cc0b4;opacity:.75;animation-duration:18s}
.wave.w2{bottom:7%;fill:#2f9a91;animation-duration:12s;animation-direction:reverse}
.wave.w3{bottom:-3%;fill:#17736d;animation-duration:9s}
@keyframes waveMove{to{transform:translateX(-50%)}}

/* club scene: dark room, sweeping beams, equalizer */
.scene-club{background:radial-gradient(90% 70% at 50% 115%,#4a2160 0%,#1a1030 55%,#0d0918 100%)}
.beam{position:absolute;left:50%;bottom:-8%;width:26vw;height:125%;transform-origin:50% 100%;mix-blend-mode:screen;filter:blur(3px);
  clip-path:polygon(47% 100%,53% 100%,100% 0,0 0);animation:beam 6s ease-in-out infinite alternate}
.beam.b1{--r:-40deg;background:linear-gradient(to top,rgba(237,121,144,.7),rgba(237,121,144,0) 85%)}
.beam.b2{--r:-15deg;background:linear-gradient(to top,rgba(91,91,214,.65),rgba(91,91,214,0) 85%);animation-duration:7.5s}
.beam.b3{--r:15deg;background:linear-gradient(to top,rgba(42,165,151,.6),rgba(42,165,151,0) 85%);animation-duration:5.2s}
.beam.b4{--r:40deg;background:linear-gradient(to top,rgba(247,168,35,.55),rgba(247,168,35,0) 85%);animation-duration:8.4s}
@keyframes beam{from{transform:translateX(-50%) rotate(var(--r))}to{transform:translateX(-50%) rotate(calc(var(--r) * -.4))}}
.haze{position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 100%,rgba(237,121,144,.35),transparent 70%)}
.eq{position:absolute;left:0;right:0;bottom:0;height:20%;display:flex;align-items:flex-end;gap:.5%;padding:0 1.5%;opacity:.5}
.eq i{flex:1;height:30%;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--pink),#7a5cff);animation:eq 1.1s ease-in-out infinite alternate}
.eq i:nth-child(2n){animation-duration:.8s}
.eq i:nth-child(3n){animation-duration:1.45s;animation-delay:.2s}
.eq i:nth-child(5n){animation-duration:.65s;animation-delay:.35s}
.eq i:nth-child(7n){animation-duration:1.8s}
@keyframes eq{from{height:10%}to{height:96%}}

/* ============ intro ============ */
.fx-intro-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,6vw,90px);align-items:center}
.fx-intro p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:14px;max-width:56ch}
.fx-photo{position:relative;aspect-ratio:1;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in}
.fx-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fx-photo:hover img{transform:scale(1.05)}
.fx-photo-tag{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;white-space:nowrap;
  background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.85rem}
.fmt-beach .fx-photo{border-radius:42% 58% 55% 45%/45% 45% 55% 55%;animation:morph 14s ease-in-out infinite}
@keyframes morph{0%,100%{border-radius:42% 58% 55% 45%/45% 45% 55% 55%}50%{border-radius:58% 42% 45% 55%/55% 40% 60% 45%}}
.fmt-club .fx-photo{border-radius:30px;box-shadow:0 0 0 3px var(--pink),0 0 40px rgba(237,121,144,.5),var(--shadow)}

/* ============ features ============ */
.fx-feat{background:var(--paper)}
.fx-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fx-card{padding:26px;border-radius:24px;background:#fff;border:1px solid rgba(35,26,21,.08);transition:transform .45s var(--ease)}
.fx-card:hover{transform:translateY(-6px)}
.fx-card h3{font-size:1.12rem;margin-bottom:8px;line-height:1.2}
.fx-card p{font-size:.94rem;color:var(--ink-soft)}
.fx-ico{position:relative;display:block;width:54px;height:54px;margin-bottom:18px;border-radius:16px;overflow:hidden}
.ico-1{background:var(--pink)}.ico-2{background:var(--orange)}.ico-3{background:var(--teal)}.ico-4{background:var(--navy)}
.fx-ico::after{content:"";position:absolute;inset:14px;border-radius:50%;border:4px solid #fff}
.ico-2::after{inset:auto 10px 14px;height:10px;border:0;border-radius:0;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px)}
.ico-3::after{border-radius:6px;transform:rotate(45deg);inset:16px}
.ico-4::after{inset:12px 20px;border-radius:4px;border:0;background:#fff;box-shadow:-10px 8px 0 -2px #fff,10px 8px 0 -2px #fff}

/* ============ scale ============ */
.fx-scale-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px);align-items:center}
.scale-viz{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2.2vw,28px);min-height:300px}
.sv{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transition:transform .4s var(--ease)}
.sv:hover{transform:translateY(-6px)}
.sv i{display:block;border-radius:50%;background:rgba(35,26,21,.1);border:2px dashed rgba(35,26,21,.25)}
.sv-festival i{width:clamp(130px,15vw,220px);aspect-ratio:1}
.sv-beach i{width:clamp(92px,10.5vw,150px);aspect-ratio:1}
.sv-club i{width:clamp(58px,6.5vw,92px);aspect-ratio:1}
.sv b{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;max-width:14ch}
.fmt-beach .sv-beach i,.fmt-club .sv-club i{border:0;animation:ring 2.4s ease-out infinite}
.fmt-beach .sv-beach i{background:radial-gradient(circle at 50% 38%,#fff1c2,#ffb36b 45%,#ed7990 75%)}
.fmt-club .sv-club i{background:radial-gradient(circle at 50% 40%,#ed7990,#5b2a8c 75%)}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(237,121,144,.55)}100%{box-shadow:0 0 0 26px rgba(237,121,144,0)}}

/* ============ cta ============ */
.fx-cta{min-height:min(84svh,780px);display:flex;align-items:center;text-align:center;overflow:hidden;background:var(--pink)}
.fx-cta-inner{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center}
.fx-cta .sec-title{max-width:18ch;color:#fff;text-shadow:0 6px 0 rgba(107,20,40,.22)}
.fx-cta .lead{color:var(--ink);margin-inline:auto}

/* ============ club: dark variant for the whole page ============ */
.page-fmt.fmt-club{background:#120c1f;color:var(--cream)}
.fmt-club .fx-intro,.fmt-club .fx-scale{background:#150f24}
.fmt-club .fx-feat{background:#1b1430}
.fmt-club .sec-title{color:#fff}
.fmt-club .eyebrow{color:var(--pink)}
.fmt-club .fx-intro p,.fmt-club .lead{color:rgba(244,236,220,.72)}
.fmt-club .fx-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.fmt-club .fx-card p{color:rgba(244,236,220,.7)}
.fmt-club .sv i{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.fmt-club .fx-cta{background:linear-gradient(135deg,#2a1745,#5b2a8c 60%,#ed7990)}
.fmt-club .fx-cta .lead{color:rgba(255,255,255,.85)}

/* beach: warm variant */
.fmt-beach .fx-scale{background:linear-gradient(180deg,var(--cream),#ffe8d2)}
.fmt-beach .fx-cta{background:linear-gradient(180deg,#f7a15e,#ed7990)}

/* ============ responsive ============ */
@media (max-width:980px){
  .fx-intro-grid,.fx-scale-grid{grid-template-columns:1fr}
  .fx-feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .fx-feat-grid{grid-template-columns:1fr}
  .scale-viz{min-height:220px}
}