/* ============================================
   $ISLAND
   ============================================ */

:root {
  --bg: #060608;
  --bg2: #0a0a0e;
  --surface: #111116;
  --surface2: #18181f;
  --border: rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --text: #f0f0f2;
  --text-mid: #b4b4bc;
  --text-dim: #6b6b76;
  --white: #ffffff;
  --danger: #f43f5e;
  --radius: 12px;
  --radius-sm: 8px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}
html { overflow-x: hidden }
html, body { overscroll-behavior-x: none }

a { color: var(--text); text-decoration: none; transition: color .25s }
a:hover { color: var(--accent) }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px }
.center { text-align: center }

#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none }

/* ---- RIBBON BANNER ---- */
.ribbon-banner {
  position: fixed; top: 64px; left: 0; width: 100%; z-index: 999;
  background: #dc2626; overflow: hidden; white-space: nowrap;
  padding: 10px 0;
  box-shadow: 0 6px 24px rgba(220,38,38,.4);
}
.ribbon-banner::after {
  content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 20px;
  background: #dc2626; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.ribbon-track {
  display: inline-flex; gap: 0;
  animation: ribbonScroll 20s linear infinite;
}
.ribbon-track span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: #fff; padding: 0 40px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
@keyframes ribbonScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ---- NAV ---- */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
  backdrop-filter: blur(20px) saturate(1.4);
  background: rgba(6,6,8,0.75);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
.nav-left { display:flex; align-items:center; gap:14px }
.nav-brand { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; color:var(--white); letter-spacing:-1px }
.nav-socials { display:flex; gap:6px }
.nav-social-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text-dim); transition:all .25s }
.nav-social-btn:hover { background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.4); color:var(--white) }
.nav-links { display:flex; align-items:center; gap:28px }
.nav-links a { color:var(--text-dim); font-size:.78rem; letter-spacing:.8px; text-transform:uppercase; font-weight:500; transition:color .25s }
.nav-links a:hover { color:var(--white) }
.btn-nav { background:var(--accent); color:var(--white)!important; padding:9px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:.78rem!important; transition:background .25s }
.btn-nav:hover { background:var(--accent-hover); color:var(--white)!important }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer }
.hamburger span { width:20px; height:1.5px; background:var(--text-mid); transition:.3s }
.mobile-menu { display:none; position:fixed; top:64px; left:0; width:100%; background:rgba(6,6,8,0.97); backdrop-filter:blur(20px); flex-direction:column; padding:24px; gap:20px; z-index:999; border-bottom:1px solid var(--border) }
.mobile-menu.open { display:flex }
.mobile-menu a { color:var(--text-mid); font-size:.9rem; text-transform:uppercase; letter-spacing:.5px }

/* ---- HERO ---- */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden }
.hero-bg { position:absolute; inset:0; z-index:0 }
.hero-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(.7) saturate(1.15) }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(6,6,8,0.4) 0%, rgba(6,6,8,0.7) 100%); z-index:1 }
.hero-content { position:relative; z-index:2; max-width:700px; padding:0 24px }
.hero-badge { display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:700; color:var(--white); letter-spacing:3px; text-transform:uppercase; background:rgba(59,130,246,0.15); border:1px solid rgba(59,130,246,0.4); padding:8px 20px; border-radius:20px; margin-bottom:32px; opacity:0; animation:fadeUp .7s .2s forwards }
.hero-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(4.5rem,14vw,10rem); font-weight:700; line-height:.9; margin-bottom:24px; letter-spacing:-4px; color:var(--white); opacity:0; animation:fadeUp .7s .35s forwards }
.hero-sub { font-size:1.5rem; color:var(--white); max-width:460px; margin:0 auto 40px; font-weight:500; line-height:1.7; opacity:0; animation:fadeUp .7s .5s forwards; letter-spacing:.5px }
.hero-sub em { color:var(--accent); font-style:normal; font-weight:500 }
.hero-actions { display:flex; gap:14px; justify-content:center; opacity:0; animation:fadeUp .7s .65s forwards }
.btn-primary { display:inline-block; background:var(--accent); color:var(--white); padding:14px 40px; border-radius:var(--radius-sm); font-weight:600; font-size:.85rem; letter-spacing:.5px; border:none; cursor:pointer; transition:all .25s }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 8px 30px rgba(59,130,246,.25); color:var(--white) }
.btn-ghost { display:inline-block; color:var(--text-mid); padding:14px 32px; border-radius:var(--radius-sm); font-weight:500; font-size:.85rem; letter-spacing:.5px; border:1px solid var(--border); transition:all .25s }
.btn-ghost:hover { border-color:var(--text-mid); color:var(--white) }
.pulse { animation:fadeUp .7s .65s forwards, pulse 3s 2s infinite }
.scroll-hint { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2 }
.scroll-line { width:1px; height:48px; background:linear-gradient(to bottom, transparent, var(--text-dim)); opacity:.4; animation:scrollBounce 2.5s infinite }

/* ---- SECTIONS ---- */
.section { position:relative; z-index:1; padding:100px 0 }
.section-dark { background:var(--bg2) }
.section-tag { font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; font-weight:400 }
.section-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; margin-bottom:48px; letter-spacing:-1px; color:var(--white) }
.highlight { color:var(--accent) }

/* ---- SLIDESHOW ---- */
.gallery-wrap { position:relative }
.gallery-particles { position:absolute; inset:-40px; z-index:0; pointer-events:none }
.slideshow { position:relative; z-index:1; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); cursor:grab; user-select:none; -webkit-user-select:none }
.slideshow:active { cursor:grabbing }
.slideshow-track { display:flex; will-change:transform }
.slide { min-width:100%; aspect-ratio:2.2/1; position:relative; overflow:hidden }
.slide img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none }
.slide-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; transition:all .25s; opacity:0 }
.slideshow:hover .slide-arrow { opacity:1 }
.slide-arrow:hover { background:rgba(0,0,0,.75); border-color:rgba(255,255,255,.2) }
.slide-arrow-left { left:16px }
.slide-arrow-right { right:16px }
.slide-counter { position:absolute; bottom:16px; right:20px; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:rgba(255,255,255,.6); background:rgba(0,0,0,.4); backdrop-filter:blur(8px); padding:4px 12px; border-radius:20px; z-index:3; letter-spacing:1px }

/* ---- BOOKING ---- */
.booking-wrapper { display:grid; grid-template-columns:1fr 460px; gap:60px; align-items:start }
.booking-heading { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,4vw,2.4rem); font-weight:700; line-height:1.2; letter-spacing:-1px; color:var(--white); margin-bottom:16px }
.booking-desc { color:var(--text-mid); font-size:.95rem; line-height:1.7; margin-bottom:28px }
.booking-disclaimer { font-size:.75rem; color:var(--text-dim); line-height:1.6; padding:12px 16px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius-sm); margin-top:0 }
.booking-disclaimer strong { color:var(--accent); font-weight:600 }

.booking-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:0; overflow:hidden }
.booking-field { padding:22px 28px }
.booking-field + .booking-field { border-top:1px solid var(--border) }
.booking-field-row { display:flex; align-items:center; gap:14px; color:var(--text-dim) }
.booking-field-row svg { flex-shrink:0 }
.booking-field-row div { display:flex; flex-direction:column }
.field-label { font-size:.65rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.5px; font-weight:500; line-height:1.4 }
.field-value { white-space:nowrap; font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:600; color:var(--white) }
.booking-divider { display:flex; align-items:center; justify-content:center; height:0; position:relative; z-index:2 }
.booking-divider svg { background:var(--surface2); border:1px solid var(--border); border-radius:50%; padding:6px; width:28px; height:28px; color:var(--text-dim) }
.booking-row { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border) }
.booking-cell { padding:18px 28px; display:flex; flex-direction:column; gap:4px }
.booking-cell + .booking-cell { border-left:1px solid var(--border) }
.seats-value { color:var(--danger)!important }
.kids-free { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; color:var(--white); text-align:center; padding:16px 20px; border-top:1px solid var(--border); letter-spacing:.5px }
.btn-book { width:100%; padding:18px; background:var(--accent); color:var(--white); font-family:'Space Grotesk',sans-serif; font-size:.9rem; font-weight:600; border:none; cursor:pointer; transition:background .25s; letter-spacing:.3px }
.btn-book:hover { background:var(--accent-hover) }
.booking-tos { font-size:.65rem; color:var(--text-dim); text-align:center; padding:10px 16px; line-height:1.5 }
.booking-tos a { color:var(--accent); text-decoration:underline }

/* ---- ABOUT ---- */
.about-content { max-width:720px; margin:0 auto; text-align:center }
.about-content p { color:var(--text-mid); margin-bottom:18px; font-size:.95rem; line-height:1.8 }
.about-content strong { color:var(--white); font-weight:600 }
.about-content em { color:var(--accent); font-style:normal }

/* ---- COMMUNITY ---- */
.community-text { color:var(--text-mid); max-width:480px; margin:0 auto 36px; font-size:.95rem; line-height:1.7 }
.social-links { display:flex; justify-content:center; gap:14px; flex-wrap:wrap }
.social-card { display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:24px 40px; transition:border-color .3s,transform .35s cubic-bezier(.16,1,.3,1); color:var(--text-mid); font-size:.82rem; font-weight:500 }
.social-card:hover { border-color:var(--border-hover); color:var(--white); transform:translateY(-2px) }
.social-icon { width:22px; height:22px }

/* ---- FOOTER ---- */
.footer { position:relative; z-index:1; text-align:center; padding:48px 0; border-top:1px solid var(--border) }
.footer-brand { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:var(--white); margin-bottom:12px; letter-spacing:-.5px }
.footer-text { font-size:.72rem; color:var(--text-dim); max-width:400px; margin:0 auto 8px; line-height:1.6 }
.footer-copy { font-size:.65rem; color:rgba(255,255,255,.12) }
.footer-links { display:flex; justify-content:center; gap:16px; margin-top:12px }
.footer-links a { font-size:.68rem; color:var(--text-dim); transition:color .25s }
.footer-links a:hover { color:var(--white) }

/* ---- CONSENT BANNER ---- */
.consent-banner {
  position:fixed; bottom:0; left:0; width:100%; z-index:9999;
  background:rgba(10,10,14,.97); backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  padding:20px 24px;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  font-size:.82rem; color:var(--text-mid);
  transition:transform .4s ease, opacity .4s ease;
}
.consent-banner.hide { transform:translateY(100%); opacity:0 }
.consent-banner p { max-width:600px; line-height:1.6; margin:0 }
.consent-banner a { color:var(--accent); text-decoration:underline }
.consent-buttons { display:flex; gap:10px }
.consent-accept { background:var(--accent); color:var(--white); border:none; padding:8px 20px; border-radius:var(--radius-sm); font-size:.78rem; font-weight:600; cursor:pointer; transition:background .25s }
.consent-accept:hover { background:var(--accent-hover) }
.consent-decline { background:transparent; color:var(--text-dim); border:1px solid var(--border); padding:8px 20px; border-radius:var(--radius-sm); font-size:.78rem; font-weight:500; cursor:pointer; transition:border-color .25s }
.consent-decline:hover { border-color:var(--text-mid); color:var(--text-mid) }

/* ---- ANIMATIONS ---- */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.3)} 50%{box-shadow:0 0 0 14px rgba(59,130,246,0)} }
@keyframes scrollBounce { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(10px);opacity:.15} }

/* ---- SCROLL REVEAL ---- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1) }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-delay-1{transition-delay:.06s} .reveal-delay-2{transition-delay:.12s} .reveal-delay-3{transition-delay:.18s} .reveal-delay-4{transition-delay:.24s}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px) {
  .booking-wrapper { grid-template-columns:1fr; gap:40px }
  .booking-card { max-width:460px }
}
@media(max-width:768px) {
  .nav-links{display:none} .hamburger{display:flex}
  .social-card{padding:20px 32px} .navbar{padding:0 20px}
  .section{padding:72px 0}
  .booking-wrapper{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:center}
  .slide{aspect-ratio:16/9}
  #particles, .gallery-particles { display:none }
}
@media(max-width:480px) {
  .booking-row{grid-template-columns:1fr}
  .booking-cell + .booking-cell{border-left:none;border-top:1px solid var(--border)}
}