@font-face { font-family: "Hanimation"; src: url("../assets/fonts/Hanimation-Light.otf"); font-weight: 300; }
@font-face { font-family: "Hanimation"; src: url("../assets/fonts/Hanimation-Regular.otf"); font-weight: 400; }
@font-face { font-family: "Hanimation"; src: url("../assets/fonts/Hanimation-Medium.otf"); font-weight: 500; }
@font-face { font-family: "Hanimation"; src: url("../assets/fonts/Hanimation-Bold.otf"); font-weight: 700; }
@font-face { font-family: "Hanimation"; src: url("../assets/fonts/Hanimation-ExtraBold.otf"); font-weight: 800; }

:root {
  --navy: #030b18;
  --brand: #125daa;
  --cyan: #0eb2e2;
  --teal: #45bed1;
  --ink: #eaf6ff;
  --u: min(1vw, 0.5625vh);           /* 1% of the width of a 9:16 portrait frame */
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--ink);
  font-family: "Hanimation", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}
body.kiosk, body.kiosk * { cursor: none !important; }

#gl, #fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; mix-blend-mode: screen; }

.layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; }
.layer.active { pointer-events: auto; }
body.no-webgl #sleep {
  background: radial-gradient(circle at 50% 56%, rgba(14,178,226,.38) 0%, rgba(18,93,170,.42) 26%, #06152d 58%, #030b18 100%);
}

/* ---------- SLEEP ---------- */
.brand-top {
  position: absolute; top: 6.5vh; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4);
}
.brand-cloud { width: calc(var(--u) * 17); filter: drop-shadow(0 0 calc(var(--u)*1) rgba(120,230,255,.7)) drop-shadow(0 0 calc(var(--u)*5) rgba(14,178,226,.55)); }
.brand-words { width: calc(var(--u) * 26); opacity: .95; filter: drop-shadow(0 0 calc(var(--u)*1.6) rgba(14,178,226,.65)); -webkit-clip-path: inset(0 0 8% 0); clip-path: inset(0 0 8% 0); }

.geo-label {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(var(--u)*1.4);
  font-weight: 500; font-size: calc(var(--u) * 3); letter-spacing: .02em; color: #fff;
  text-shadow: 0 0 calc(var(--u)*2) rgba(14,178,226,.9);
  opacity: 0; transition: opacity .6s; will-change: transform;
  padding: calc(var(--u)*.8) calc(var(--u)*2.2); border-radius: 99px;
  background: rgba(3,11,24,.35); border: 1px solid rgba(69,190,209,.35);
}
.geo-label .dot { width: calc(var(--u)*1.2); height: calc(var(--u)*1.2); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.cta {
  position: absolute; left: 50%; top: 68vh; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-ring { position: relative; width: calc(var(--u)*15); height: calc(var(--u)*15); margin-bottom: calc(var(--u)*4); }
.cta-ring i {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(110,230,255,.9); box-shadow: 0 0 14px rgba(14,178,226,.9), inset 0 0 12px rgba(14,178,226,.6);
  animation: ring 3.6s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0;
}
.cta-ring i:nth-child(2) { animation-delay: 1.2s; }
.cta-ring i:nth-child(3) { animation-delay: 2.4s; }
.cta-ring b {
  position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #bff1ff 30%, rgba(14,178,226,.9) 60%, rgba(14,178,226,0) 72%);
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes ring { 0% { transform: scale(.35); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes breathe { 0%,100% { transform: scale(.85); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }
.cta-main {
  white-space: nowrap;
  font-size: calc(var(--u) * 5.2); font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 0 6px rgba(140,235,255,.55), 0 0 26px rgba(14,178,226,.75);
  animation: textBreathe 3.6s ease-in-out infinite;
}
.cta-sub {
  margin-top: calc(var(--u)*1.6); font-size: calc(var(--u) * 2.6); font-weight: 300;
  letter-spacing: .35em; text-transform: uppercase; opacity: .55; direction: ltr;
}
@keyframes textBreathe { 0%,100% { opacity: .78; } 50% { opacity: 1; } }

/* ---------- REVEAL ---------- */
#reveal { display: flex; flex-direction: column; align-items: center; }
.mark {
  position: absolute; top: 30vh; left: 50%; width: calc(var(--u) * 62); aspect-ratio: 1126 / 708;
  transform: translate(-50%, -50%);
}
.mark .c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, filter, opacity; }
.mark-glow {
  position: absolute; inset: -40%; border-radius: 50%; opacity: 0; z-index: -1;
  background: radial-gradient(closest-side, rgba(14,178,226,.55), rgba(18,93,170,.25) 45%, transparent 75%);
}
.word-ar, .word-en { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; }
.word-ar { top: 45vh; width: calc(var(--u) * 64); }
.word-en { top: calc(45vh + var(--u) * 21); width: calc(var(--u) * 46); }
.tagline {
  position: absolute; top: calc(45vh + var(--u) * 34); left: 0; right: 0; text-align: center;
  font-size: calc(var(--u) * 4.2); font-weight: 500; color: #dff4ff;
  text-shadow: 0 0 24px rgba(14,178,226,.5);
}
.tagline span { display: inline-block; opacity: 0; }

/* ---------- MENU ---------- */
#menu { display: flex; flex-direction: column; align-items: center; padding-top: 30vh; }
.menu-hello { font-size: calc(var(--u)*3.4); font-weight: 400; color: var(--teal); opacity: 0; }
.menu-title { font-size: calc(var(--u)*6.4); font-weight: 800; margin-top: calc(var(--u)*1.5); opacity: 0; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.cards { width: calc(var(--u) * 84); margin-top: calc(var(--u)*8); display: flex; flex-direction: column; gap: calc(var(--u)*4.5); }
.card {
  position: relative; display: flex; align-items: center; gap: calc(var(--u)*5);
  padding: calc(var(--u)*5.5) calc(var(--u)*6); border-radius: calc(var(--u)*5);
  font-family: inherit; color: inherit; text-align: right; border: none; opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 20px 60px rgba(2,10,30,.45);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(120%); animation: sheen 6s ease-in-out infinite;
}
.card:nth-child(2)::after { animation-delay: 3s; }
@keyframes sheen { 0%, 70% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }
.card:active { transform: scale(.97); background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); }
.card-icon {
  flex: none; width: calc(var(--u)*15); height: calc(var(--u)*15); border-radius: calc(var(--u)*4);
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cyan), var(--brand));
  box-shadow: 0 10px 30px rgba(14,178,226,.35);
}
.card:nth-child(2) .card-icon { background: linear-gradient(140deg, var(--teal), var(--brand)); }
.card-icon svg { width: 58%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.card-icon svg circle { fill: #fff; stroke: none; }
.card-txt { display: flex; flex-direction: column; gap: calc(var(--u)*1.4); flex: 1; }
.card-txt b { font-size: calc(var(--u)*6); font-weight: 800; }
.card-txt small { font-size: calc(var(--u)*3); font-weight: 400; opacity: .75; }
.card-arrow { font-size: calc(var(--u)*8); opacity: .6; font-weight: 300; }
.back-home {
  margin-top: calc(var(--u)*9); font-family: inherit; font-size: calc(var(--u)*3); color: #cfe9f7;
  background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 99px;
  padding: calc(var(--u)*2) calc(var(--u)*5); opacity: 0;
}
.credits { position: absolute; bottom: 2.2vh; font-size: calc(var(--u)*1.7); opacity: .3; direction: rtl; }
.toast {
  position: absolute; bottom: 14vh; left: 50%; transform: translate(-50%, 20px); opacity: 0;
  background: rgba(3,11,24,.7); border: 1px solid rgba(69,190,209,.4); backdrop-filter: blur(10px);
  padding: calc(var(--u)*2.4) calc(var(--u)*6); border-radius: 99px; font-size: calc(var(--u)*3.2);
  transition: opacity .4s, transform .4s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- FX ---------- */
#ripples { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: 20; }
.ripple {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2px solid rgba(160,235,255,.9); box-shadow: 0 0 30px rgba(14,178,226,.8), inset 0 0 20px rgba(14,178,226,.6);
}
.ripple.core { border: none; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(14,178,226,.5) 45%, transparent 70%); box-shadow: none; }
#fade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: #000; opacity: 1; pointer-events: none; z-index: 30; }
#fade.dive-flash {
  background: radial-gradient(circle at 50% 58%, #eefaff 0%, #a8dcf6 42%, #154578 100%);
}
body.light #fade.dive-flash {
  background: radial-gradient(circle at 50% 58%, #ffffff 0%, #ddf1ff 52%, #7bb9eb 100%);
}

#menu:not(.active) .credits { opacity: 0; }

/* ---------- NEON PASS ---------- */
.mark-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mark-lines .ln {
  fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 18px currentColor);
}
.ln-dark { stroke: #6fb4ff; color: #2f8cff; }
.ln-cyan { stroke: #8ff0ff; color: #0eb2e2; }
.ln-teal { stroke: #9ff6ff; color: #45bed1; }

.menu-hello { text-shadow: 0 0 10px rgba(69,190,209,.9); }
.menu-title { text-shadow: 0 0 4px rgba(200,245,255,.5), 0 0 24px rgba(14,178,226,.6), 0 4px 30px rgba(0,0,0,.35); }

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 28px rgba(14,178,226,.18), 0 20px 60px rgba(2,10,30,.45); }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--a), transparent 0 55%, rgba(14,178,226,.9) 70%, #e9fdff 78%, rgba(69,190,209,.9) 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px rgba(14,178,226,.9));
  animation: orbit 5s linear infinite;
}
.card:nth-child(2)::before { animation-delay: -2.5s; }
@keyframes orbit { to { --a: 360deg; } }
.card-icon { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 22px rgba(14,178,226,.65), 0 10px 30px rgba(14,178,226,.35); }
.card-icon svg { filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.back-home { box-shadow: 0 0 14px rgba(14,178,226,.25); }

@media (prefers-reduced-motion: reduce) { .card::before, .card::after { animation: none; } }

/* ---------- MENU v3: orbs above the clouds ---------- */
#menu { padding-top: 27vh; }
.orbs { display: flex; justify-content: center; gap: calc(var(--u)*9); margin-top: calc(var(--u)*13); }
.orb-btn {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*1.6);
  background: none; border: 0; color: inherit; font-family: inherit; opacity: 0; cursor: pointer;
  width: calc(var(--u)*38);
}
.orb-wrap { position: relative; width: calc(var(--u)*32); height: calc(var(--u)*32); margin-bottom: calc(var(--u)*5); animation: bob 6s ease-in-out infinite; }
.orb-btn:nth-child(2) .orb-wrap { animation-delay: -3s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u)*-2.2)); } }
.orb {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  box-shadow:
    0 0 0 1.5px rgba(170,240,255,.55),
    0 0 calc(var(--u)*6) rgba(14,178,226,.65),
    0 0 calc(var(--u)*16) rgba(14,178,226,.3),
    inset calc(var(--u)*-3) calc(var(--u)*-4) calc(var(--u)*8) rgba(0,8,40,.65),
    inset calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*5) rgba(255,255,255,.28);
}
.orb::after {           /* specular highlight */
  content: ""; position: absolute; left: 18%; top: 12%; width: 38%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); transform: rotate(-25deg);
}
.orb-a { background: radial-gradient(circle at 34% 30%, #c9f6ff 0, #2fc6ef 16%, #0e8fd0 38%, #125daa 64%, #06204a 100%); }
.orb-b { background: radial-gradient(circle at 34% 30%, #d5fbff 0, #6fd9e6 16%, #2ab3c8 38%, #157ea0 64%, #062a45 100%); }
.orb svg { position: relative; z-index: 1; width: 44%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(120,230,255,.9)); }
.orb svg circle { fill: #fff; stroke: none; }
.orbit {
  position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 1px solid rgba(160,240,255,.35); transform: rotateX(72deg) rotateZ(-14deg);
  animation: orbitspin 7s linear infinite;
}
.orbit.o2 { transform: rotateX(72deg) rotateZ(14deg); animation-duration: 9s; animation-direction: reverse; }
.orbit i {
  position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #fff, 0 0 18px #0eb2e2, 0 0 30px #0eb2e2;
}
@keyframes orbitspin { from { rotate: 0deg; } to { rotate: 360deg; } }
.pool {                  /* light the orb casts on the clouds below */
  position: absolute; left: 50%; bottom: calc(var(--u)*-9); width: 120%; height: calc(var(--u)*6);
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14,178,226,.45), rgba(14,178,226,0));
  filter: blur(4px); animation: pool 6s ease-in-out infinite;
}
.orb-btn:nth-child(2) .pool { animation-delay: -3s; }
@keyframes pool { 0%,100% { opacity: .9; transform: translateX(-50%) scale(1); } 50% { opacity: .55; transform: translateX(-50%) scale(.85); } }
.orb-btn b { font-size: calc(var(--u)*6.4); font-weight: 800; text-shadow: 0 0 4px rgba(210,248,255,.5), 0 0 22px rgba(14,178,226,.7); }
.orb-btn small { font-size: calc(var(--u)*3); font-weight: 400; color: #bfe6f6; opacity: .8; }
.orb-btn:active .orb { filter: brightness(1.25); }
.back-home {
  display: inline-flex; align-items: center; gap: calc(var(--u)*1.5); margin-top: calc(var(--u)*11);
  font-size: calc(var(--u)*2.8); padding: calc(var(--u)*1.8) calc(var(--u)*4.5);
  background: rgba(3,20,45,.35);
}
.back-home svg { width: calc(var(--u)*3.6); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .orb-wrap, .orbit, .pool { animation: none; } }

/* ---------- theme toggle ---------- */
.theme-btn {
  position: absolute; top: 3.2vh; left: calc(var(--u)*5); opacity: 0;
  width: calc(var(--u)*11); height: calc(var(--u)*11); border-radius: 50%;
  display: grid; place-items: center; color: #d9f3ff; cursor: pointer;
  background: rgba(3,20,45,.35); border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 14px rgba(14,178,226,.25);
  transition: background .6s, color .6s, border-color .6s, transform .2s;
}
.theme-btn:active { transform: scale(.92); }
.theme-btn svg { grid-area: 1/1; width: 52%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .5s, transform .6s; }
.theme-btn .i-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
body.light .theme-btn .i-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
body.light .theme-btn .i-moon { opacity: 1; transform: none; }

/* ---------- LIGHT THEME: a sunny day above the clouds ---------- */
body.light #menu, body.light #reveal { color: #0b2a55; }
#menu p, #menu h1, #menu b, #menu small, .tagline, .back-home, .credits { transition: color .8s, text-shadow .8s, background .8s, border-color .8s; }
body.light .menu-hello { color: #1572b8; text-shadow: 0 0 12px rgba(255,255,255,.9); }
body.light .menu-title { color: #0b2a55; text-shadow: 0 0 18px rgba(255,255,255,.95), 0 2px 10px rgba(255,255,255,.7); }
body.light .orb-btn b { color: #0b2a55; text-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }
body.light .orb-btn small { color: #22507e; opacity: .9; text-shadow: 0 0 10px rgba(255,255,255,.9); }
body.light .orb { box-shadow:
    0 0 0 1.5px rgba(255,255,255,.8),
    0 0 calc(var(--u)*6) rgba(14,178,226,.45),
    0 calc(var(--u)*3) calc(var(--u)*10) rgba(11,42,85,.25),
    inset calc(var(--u)*-3) calc(var(--u)*-4) calc(var(--u)*8) rgba(0,8,40,.45),
    inset calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*5) rgba(255,255,255,.35); }
body.light .orbit { border-color: rgba(11,60,120,.3); }
body.light .pool { background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)); }
body.light .back-home, body.light .theme-btn { color: #0b2a55; background: rgba(255,255,255,.5); border-color: rgba(11,42,85,.22); box-shadow: 0 4px 18px rgba(11,42,85,.12); }
body.light .credits { color: #0b2a55; }
body.light .toast { background: rgba(255,255,255,.75); color: #0b2a55; border-color: rgba(11,42,85,.2); }
body.light .tagline { color: #0b2a55; text-shadow: 0 0 16px rgba(255,255,255,.95); }
body.light #fx { opacity: .55; }