/* ===== Design polish v1.6 — patterns, motion, containers, buttons ===== */

:root {
  --space-1: .35rem;
  --space-2: .7rem;
  --space-3: 1.1rem;
  --space-4: 1.7rem;
  --space-5: 2.6rem;
  --space-6: clamp(2.8rem, 6vw, 4.6rem);
  --shadow-soft: 0 8px 24px rgba(28, 36, 48, 0.06);
  --shadow-lift: 0 18px 40px rgba(28, 36, 48, 0.12);
  --radius-blob: 28px 12px 30px 14px;
  --radius-blob-alt: 14px 30px 12px 28px;
  --net: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 24h48M24 0v48' stroke='%23102033' stroke-opacity='.07' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23ed1566' fill-opacity='.22'/%3E%3C/svg%3E");
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1.5' cy='1.5' r='1.25' fill='%231c2430' fill-opacity='.07'/%3E%3C/svg%3E");
}

body {
  background-color: var(--bg);
  background-image: var(--dots), var(--net);
  background-size: 20px 20px, 48px 48px;
  background-position: 0 0, 12px 8px;
  background-attachment: fixed;
}

/* Floating brand orbs */
body::before,
body::after {
  opacity: 0.42;
  filter: blur(0);
}
body::before {
  border: 18px solid rgba(237, 21, 102, 0.08);
  background: #fde7ef;
  animation: floatOrb 18s ease-in-out infinite, pulseSoft 9s ease-in-out infinite;
}
body::after {
  border: 16px solid rgba(15, 110, 106, 0.08);
  background: #e7f4f3;
  animation: floatOrb 22s ease-in-out infinite reverse, pulseSoft 11s ease-in-out infinite 1s;
}
@keyframes pulseSoft {
  0%, 100% { opacity: .32; }
  50% { opacity: .5; }
}

/* Refined buttons */
.btn {
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
  box-shadow: var(--shadow-soft);
  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease),
    color .28s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.0);
  transition: background .28s var(--ease);
  pointer-events: none;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.btn:active { transform: translateY(-1px) scale(.98); }
.btn-glow, .btn-primary {
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(237, 21, 102, 0.22);
}
.btn-glow:hover, .btn-primary:hover {
  background: var(--brand-dark);
  box-shadow: 0 16px 32px rgba(237, 21, 102, 0.28);
}
.btn-outline {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-soft);
}
.btn-outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow-lift);
  color: var(--brand);
  background: #fff;
}
.btn-on-dark {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover {
  background: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1.5px #fff, 0 12px 28px rgba(0,0,0,.2);
}

/* Nav polish */
.site-header {
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(28, 36, 48, 0.08);
}
.site-nav a {
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.site-nav a:hover {
  transform: translateY(-1px);
}
.brand-mark img {
  border-radius: 10px;
  transition: transform .35s var(--ease);
}
.brand:hover .brand-mark img { transform: rotate(-4deg) scale(1.04); }

/* Sections + spacing */
.section { padding: var(--space-6) 0; position: relative; }
.section-alt {
  background-color: var(--bg-soft);
  background-image: var(--net);
  background-size: 48px 48px;
}
.section-pattern {
  background-image: var(--dots);
  background-size: 18px 18px;
}
.section-tint-sand,
.section-tint-mint,
.section-tint-rose,
.section-stories,
.social-feed-section,
.section-gallery,
.stats-band {
  background-image: var(--net), var(--dots) !important;
  background-size: 48px 48px, 20px 20px !important;
}
.section-head { margin-bottom: var(--space-4); gap: var(--space-3); }
.section-head h2 { letter-spacing: -0.03em; }

/* Cards */
.card {
  border-radius: var(--radius-blob);
  box-shadow: var(--shadow-soft);
  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: #f0b4cb;
  box-shadow: var(--shadow-lift);
}
.card-programme { padding: 0 0 1.25rem; overflow: hidden; }
.card-programme .card-media {
  margin: 0 0 1rem;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #efeae2;
}
.card-programme .card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card-programme:hover .card-media img { transform: scale(1.06); }
.card-programme .meta,
.card-programme h3,
.card-programme p,
.card-programme .card-link { padding-inline: 1.2rem; }
.card-link {
  font-weight: 700;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .25s var(--ease);
}
.card-link:hover { gap: .55rem; color: var(--brand-dark); }
.card-icon {
  margin: 1.2rem 1.2rem .5rem;
  border-radius: 14px 8px 14px 8px;
  transition: transform .35s var(--ease);
}
.card:hover .card-icon { transform: rotate(-6deg) scale(1.05); }

.post-card .thumb img,
.event-card-media img,
.mini-gallery-item img,
.media-card .frame img,
.team-photo img {
  transition: transform .7s var(--ease);
}
.post-card:hover .thumb img,
.event-card:hover .event-card-media img,
.mini-gallery-item:hover img,
.media-card:hover .frame img,
.team-card:hover .team-photo img {
  transform: scale(1.05);
}

.team-card, .event-card, .media-card, .post-card {
  border-radius: var(--radius-blob-alt);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-card:hover, .event-card:hover, .media-card:hover, .post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

/* Shape frames */
.shape-frame {
  border-radius: var(--radius-blob);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.shape-frame:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.shape-frame::after {
  transition: inset .35s var(--ease), opacity .35s var(--ease);
}
.shape-frame:hover::after {
  inset: 7px;
  opacity: .9;
}

/* Hero net + ken burns */
.hero-stage { isolation: isolate; }
.hero-net {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--net);
  background-size: 42px 42px;
  opacity: .35;
  mix-blend-mode: soft-light;
  animation: netDrift 28s linear infinite;
}
@keyframes netDrift {
  from { background-position: 0 0; }
  to { background-position: 42px 84px; }
}
.hero-slide {
  transform: scale(1.02);
  transition: opacity .9s var(--ease), transform 6.5s ease-out;
}
.hero-slide.is-active {
  transform: scale(1.08);
}
.hero-overlay {
  background: rgba(16, 32, 51, 0.58);
  z-index: 1;
}
.hero-copy { z-index: 3; }
.hero-stage h1 {
  animation: heroTitleIn .8s var(--ease) both;
}
.hero-stage .hero-lead {
  animation: heroTitleIn .9s var(--ease) .08s both;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero-dots button {
  transition: width .3s var(--ease), background .3s var(--ease);
}
.hero-nav {
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.hero-nav:hover { transform: translateY(-50%) scale(1.06); }

/* Sticky visual sections */
.section-sticky {
  position: relative;
  min-height: clamp(360px, 58vh, 520px);
  display: grid;
  align-items: center;
  overflow: clip;
  color: #fff;
  padding: var(--space-6) 0;
}
.sticky-visual {
  position: absolute;
  inset: 0;
  background-image: var(--sticky-image);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  transform: scale(1.04);
  z-index: 0;
}
.sticky-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(16, 32, 51, 0.62);
  background-image: var(--net);
  background-size: 40px 40px;
  opacity: 1;
}
.sticky-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.sticky-copy h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  margin-bottom: .7rem;
}
.sticky-copy p {
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  margin-bottom: 1.4rem;
}
.eyebrow-on-dark {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

@media (max-width: 900px) {
  .sticky-visual { background-attachment: scroll; }
}

/* Stats */
.stat-chip {
  border-radius: var(--radius-blob);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stat-chip:hover {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: var(--shadow-lift);
}
.stat-chip::before {
  animation: sparkPulse 2.8s ease-in-out infinite;
}
@keyframes sparkPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* Story cards */
.story-card {
  border-radius: var(--radius-blob);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.story-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

/* Mini gallery stagger */
.mini-gallery-item { transition-delay: calc(var(--i, 0) * 60ms); }
.mini-gallery {
  gap: 1rem;
}
.mini-gallery-item:nth-child(2) { border-radius: 12px 28px 14px 30px; }
.mini-gallery-item:nth-child(3) { border-radius: 30px 14px 28px 12px; }
.mini-gallery-item:nth-child(4) { border-radius: 16px 26px 18px 24px; }

/* CTA */
.cta-banner-rich {
  padding: clamp(1.6rem, 3vw, 2.3rem);
  gap: 1.4rem;
}
.cta-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.cta-banner::after {
  content: "";
  position: absolute;
  width: 90px; height: 90px;
  left: -20px; bottom: -24px;
  border-radius: 45% 55% 50% 50%;
  background: #e7f4f3;
  opacity: .75;
  animation: floatOrb 16s ease-in-out infinite reverse;
  pointer-events: none;
}

/* Prefer-reduced-motion: show content immediately */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .motion-card,
  .story-quote-mark,
  .stat-chip,
  .eyebrow,
  .float-btn,
  .mini-gallery-item img,
  body::before,
  body::after,
  .hero-net,
  .cta-banner::after {
    animation: none !important;
  }
}

/* Interactive looping motion */
.motion-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.motion-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.motion-card img {
  transition: transform .7s var(--ease);
}
.motion-card:hover img {
  transform: scale(1.04);
}
.card-media,
.post-card .thumb,
.mini-gallery-item,
.story-photo {
  overflow: hidden;
}
.stat-chip {
  animation: chipGlow 5.5s ease-in-out infinite;
}
.stat-chip:nth-child(2) { animation-delay: .4s; }
.stat-chip:nth-child(3) { animation-delay: .8s; }
.stat-chip:nth-child(4) { animation-delay: 1.2s; }
@keyframes chipGlow {
  0%, 100% { box-shadow: var(--shadow-soft); transform: translateY(0); }
  50% { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
}
.eyebrow {
  animation: eyebrowPulse 3.8s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
.btn-glow {
  position: relative;
  overflow: hidden;
}
.btn-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  transform: translateX(-120%) skewX(-18deg);
  animation: btnSheen 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnSheen {
  0%, 55%, 100% { transform: translateX(-120%) skewX(-18deg); }
  70% { transform: translateX(140%) skewX(-18deg); }
}
.float-btn {
  animation: floatTap 3.2s ease-in-out infinite;
}
.float-btn.float-call { animation-delay: .5s; }
@keyframes floatTap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.mini-gallery-item {
  animation: galleryDrift 7s ease-in-out infinite;
}
.mini-gallery-item:nth-child(2) { animation-delay: .5s; }
.mini-gallery-item:nth-child(3) { animation-delay: 1s; }
.mini-gallery-item:nth-child(4) { animation-delay: 1.5s; }
@keyframes galleryDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (max-width: 980px) {
  .stat-chip,
  .mini-gallery-item,
  .eyebrow {
    animation-duration: 6.5s;
  }
}


/* Share / social / float */
.share-btn {
  transition: transform .25s var(--ease), border-color .25s, color .25s, background .25s;
}
.share-btn:hover {
  transform: translateY(-2px);
  background: #fde7ef;
}
.socials a {
  transition: transform .25s var(--ease), border-color .25s, color .25s;
}
.socials a:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  color: var(--brand);
}
.float-btn {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.float-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 30px rgba(28,36,48,.22);
}

/* Forms */
input, textarea, select {
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
input:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
}

/* Glass / prose containers */
.glass, .news-body, .comment-card, .countdown-panel, .highlight-list {
  border-radius: var(--radius-blob);
}
.prose h2 {
  position: relative;
  padding-bottom: .35rem;
}
.prose h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  background: var(--brand);
  border-radius: 999px;
}

/* Decorative corner ticks on key panels */
.cta-banner::before,
.stat-chip::after {
  pointer-events: none;
}

/* Performance helpers — avoid content-visibility on grids (breaks reveals / looks "stuck") */
.hero-stage,
.sticky-visual,
.card-media img,
.post-card .thumb img,
.media-card .frame img {
  content-visibility: visible;
}
@media (max-width: 980px) {
  .sticky-visual {
    background-attachment: scroll !important;
    will-change: auto;
  }
  body::before,
  body::after {
    animation: none;
    opacity: .22;
  }
  .hero-net { animation: none; opacity: .22; }
  .hero-slide.is-active { transform: none; }
}

/* Mobile drawer polish */
@media (max-width: 980px) {
  .site-nav a {
    padding: .72rem .8rem;
    font-size: .9rem;
    border-radius: 12px;
  }
  .site-nav .btn {
    margin-top: .35rem;
    width: 100%;
    justify-content: center;
  }
  /* Lock only body scroll — never touch-action:none (that freezes the whole page) */
  html.nav-open,
  body.nav-open {
    overflow: hidden;
  }
  body.nav-open .float-contact {
    visibility: hidden;
    pointer-events: none;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(16, 32, 51, 0.28);
    z-index: 80;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}