/* REVOLAX™ — fluid & flow layer. Loaded after revolax.css on the landing page.
   Water direction: soft aqua mist, glass, flowing edges, organic shapes, slow liquid motion. */
:root {
  --mist: #F2FAFA;
  --mist-2: #E3F4F4;
  --deep-1: #072431;
  --deep-2: #0B3A47;
  --deep-3: #0F5560;
  --flow: cubic-bezier(.16, 1, .3, 1);
  --r-card: 26px;
  --r-img: 34px;
}
body { background: var(--mist); }

/* ---------- Section fields: water from surface to depth ---------- */
section, .ros, .skyline, .foot, .kv { position: relative; }
.insight { --c1: #F2FAFA; background: linear-gradient(180deg, #F2FAFA 0%, #FFFFFF 70%, #F6FCFC 100%); }
.kv { --c1: #F6FCFC; background: linear-gradient(180deg, #F6FCFC, #E6F5F5); padding: clamp(24px, 4vw, 56px) var(--m) clamp(80px, 9vw, 140px); }
.std { --c1: #E6F5F5; background: radial-gradient(120% 80% at 80% 0%, #D7EFEF 0%, rgba(215,239,239,0) 60%), linear-gradient(180deg, #E6F5F5, #F4FBFB); }
.portals { --c1: #072431; background: linear-gradient(180deg, var(--deep-1) 0%, var(--deep-2) 55%, var(--deep-3) 100%); }
.reveal { background: transparent; padding: 0 var(--m) clamp(80px, 9vw, 140px); }
.science { --c1: #F4FBFB; background: radial-gradient(70% 60% at 15% 40%, #DDF2F2 0%, rgba(221,242,242,0) 70%), linear-gradient(180deg, #F4FBFB, #FFFFFF); }
.shop { --c1: #FFFFFF; background: linear-gradient(180deg, #FFFFFF 0%, #EEF8F8 100%); }
.ros { --c1: #072431; background: linear-gradient(180deg, var(--deep-1), var(--deep-2)); }
.skyline { background: linear-gradient(120deg, var(--teal-deep), var(--teal) 60%, #3FB5B8); }
.film { --c1: #F4FBFB; background: linear-gradient(180deg, #F4FBFB, #FFFFFF); }
.register { --c1: #CDEBE3; background: radial-gradient(90% 70% at 90% 10%, #E2F5EF 0%, rgba(226,245,239,0) 60%), linear-gradient(180deg, #CDEBE3, #A8D5C5); }
.pro { --c1: #0B3A47; background: linear-gradient(180deg, var(--deep-2), var(--deep-1)); }
.foot { --c1: #072431; background: var(--deep-1); }
.compliance { background: var(--deep-1); color: #8FB0BA; }

/* ---------- Flowing wave edges (inserted by fluid.js) ---------- */
.wave-edge { position: absolute; left: 0; right: 0; top: calc(-1 * clamp(42px, 6vw, 96px) + 1px); height: clamp(42px, 6vw, 96px); overflow: hidden; pointer-events: none; z-index: 3; }
.wave-edge svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.wave-edge .w1 { animation: waveflow 22s linear infinite; }
.wave-edge .w2 { animation: waveflow 34s linear infinite reverse; bottom: 6px; }
@keyframes waveflow { to { transform: translateX(-50%); } }
.hero h1 { z-index: 2; }

/* ---------- Rising bubbles (inserted by fluid.js) ---------- */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubbles span {
  position: absolute; bottom: -80px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,.22) 22%, rgba(140,214,212,.08) 58%, rgba(220,250,250,.5) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  animation: bubrise var(--d) linear var(--dl) infinite, sway calc(var(--d) / 4) ease-in-out var(--dl) infinite alternate;
  opacity: .8;
}
@keyframes bubrise { from { transform: translateY(0); } to { transform: translateY(calc(-100vh - 160px)); } }
@keyframes sway { from { margin-left: calc(var(--sw) * -1); } to { margin-left: var(--sw); } }
.std .bubbles span, .insight .bubbles span, .shop .bubbles span, .register .bubbles span { box-shadow: inset 0 0 0 1px rgba(21,157,163,.18); background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.35) 22%, rgba(102,199,197,.12) 60%, rgba(21,157,163,.18) 100%); }
section > *:not(.bubbles):not(.wave-edge), .ros > *:not(.bubbles):not(.wave-edge) { position: relative; z-index: 1; }

/* ---------- Liquid reveals: rise from the water, out of a soft blur ---------- */
.js .rv { opacity: 0; transform: translateY(42px) scale(.985); filter: blur(10px); transition: opacity 1.4s var(--flow), transform 1.6s var(--flow), filter 1.2s var(--flow); transition-delay: calc(var(--i, 0) * 110ms); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
.js .rv-img { clip-path: ellipse(0% 0% at 50% 100%); transition: clip-path 1.9s var(--flow); transition-delay: calc(var(--i, 0) * 110ms); }
.js .rv-img.in { clip-path: ellipse(150% 150% at 50% 100%); }

/* ---------- Organic shapes ---------- */
.btn { border-radius: 999px; }
.btn.light, .btn.navy, .btn.ghost { border-radius: 999px; }
.field input, .field select, .field textarea, .cart-body textarea { border-radius: 16px; }
.pc, .creds div, .specs div, .facts-mini div, .event-facts div, .ros-list li, .formats li, .shop-terms dl div, .pro-links a, .mode button, .countdown div, .webcast, .beats li, .pc-q, .pc-tag { border-radius: var(--r-card); }
.pc { overflow: hidden; }
.pc-img { border-radius: var(--r-card) var(--r-card) 0 0; }
.pc-q { overflow: hidden; }
.mode { gap: 8px; }
.event-facts div, .countdown div { border-radius: 20px; }
.beats li { border-radius: 999px; }
.panel { border-radius: var(--r-img); overflow: hidden; background: var(--grey); }
.panel-img { border-radius: 0; }
.tvc, .webcast, .skyline figure { border-radius: var(--r-img); overflow: hidden; }
.std-pics img { border-radius: var(--r-img); }
.skyline { margin: 0 var(--m); border-radius: 48px; overflow: hidden; }
.skyline figure { border-radius: 0; }
.ros-img { border-radius: var(--r-img); }
.gates { gap: 12px; }
.gate { transition: transform .9s var(--flow), filter .6s var(--flow), border-radius 1.2s var(--flow); }
.gate:hover { transform: translateY(-10px); }

/* blob images: shapes that slowly breathe like a drop of gel */
.blob { border-radius: 58% 42% 46% 54% / 46% 54% 46% 54%; animation: blob 16s ease-in-out infinite alternate; overflow: hidden; }
@keyframes blob {
  0%   { border-radius: 58% 42% 46% 54% / 46% 54% 46% 54%; }
  33%  { border-radius: 44% 56% 60% 40% / 56% 40% 60% 44%; }
  66%  { border-radius: 52% 48% 38% 62% / 40% 60% 48% 52%; }
  100% { border-radius: 40% 60% 54% 46% / 58% 44% 56% 42%; }
}

/* ---------- KV band ---------- */
.kv figure { margin: 0; border-radius: 44px; overflow: hidden; position: relative; z-index: 1; box-shadow: 0 40px 80px -30px rgba(7,36,49,.35); }
.kv img { width: 100%; display: block; aspect-ratio: 1672/941; object-fit: cover; transform: scale(1.06); animation: kvdrift 26s ease-in-out infinite alternate; }
@keyframes kvdrift { to { transform: scale(1) translate3d(-1%, -1%, 0); } }

/* ---------- Glass touches ---------- */
.pc { background: rgba(255,255,255,.72); box-shadow: 0 30px 60px -36px rgba(7,36,49,.35); transition: transform .9s var(--flow), box-shadow .9s var(--flow); }
.pc:hover { transform: translateY(-10px); box-shadow: 0 46px 80px -36px rgba(7,36,49,.45); }
.creds div, .shop-terms dl div { background: rgba(255,255,255,.7); }
.facts-mini div { background: rgba(255,255,255,.55); }
.pro-links a { background: rgba(255,255,255,.08); }
.nav.scrolled { background: rgba(7,36,49,.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }

/* ---------- Water ripple ---------- */
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 70%); transform: scale(0); animation: ripple .9s var(--flow) forwards; z-index: 0; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Hero: deeper water at the foot of the monument ---------- */
.hero-scrim { background: linear-gradient(180deg, rgba(7,36,49,.55) 0%, rgba(7,36,49,0) 28%, rgba(7,36,49,0) 52%, rgba(7,36,49,.55) 88%, rgba(7,36,49,.75) 100%); }

@media (max-width: 860px) {
  .skyline { margin: 0 12px; border-radius: 32px; }
  .kv figure { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave-edge svg, .blob, .kv img { animation: none !important; }
  .js .rv, .js .rv-img { filter: none; clip-path: none; }
}
#ra-mat { background: var(--deep-2); padding-bottom: clamp(60px, 8vw, 120px); }
#ra-mat > .event-open { z-index: 0; }