/* v18 — four cloud-coloured folded surfaces. Original brand lockup; names and
   hit areas stay still while GSAP turns the decorative layer beneath them. */
#menu.layer {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:clamp(82px,9vh,160px) max(24px,env(safe-area-inset-right)) clamp(28px,5vh,88px) max(24px,env(safe-area-inset-left));
  gap:0; text-align:center;
}
#menu .menu-brand { position:relative; inset:auto; transform:none; display:flex; flex-direction:column; align-items:center; flex:none; gap:clamp(12px,1.8vw,22px); margin:0 0 clamp(26px,4vh,72px); max-width:100%; }
#menu .menu-brand-lockup { display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.2vw,26px); direction:ltr; }
#menu .menu-brand-cloud { display:block; width:clamp(58px,10vw,118px); height:auto; object-fit:contain; }
#menu .menu-brand-type { display:block; }
#menu .menu-brand-word { display:block; width:clamp(154px,30vw,350px); height:auto; object-fit:contain; -webkit-clip-path:inset(0 0 8% 0); clip-path:inset(0 0 8% 0); }
#menu .brand-word-day { display:none; }
body.light #menu .brand-word-night { display:none; }
body.light #menu .brand-word-day { display:block; }
#menu .menu-slogan { margin:0; padding:0; max-width:27em; color:var(--ui-muted); font-size:clamp(14px,2.65vw,31px); font-weight:500; line-height:1.85; white-space:normal; text-wrap:balance; overflow:visible; }
#menu .menu-hello { margin:0; font-size:clamp(16px,2.5vw,28px); font-weight:500; line-height:1.8; color:var(--ui-accent); text-shadow:none; }
#menu .menu-title { margin:4px 0 0; color:var(--ui-ink); font-size:clamp(37px,6vw,72px); font-weight:700; line-height:1.45; text-shadow:none; }
#menu .menu-description { display:none!important; }
#menu .orbs.menu-destinations { display:grid; grid-template-columns:minmax(0,1fr); width:min(82vw,860px); max-width:100%; gap:clamp(19px,2.7vw,32px); margin:clamp(25px,4.6vw,54px) 0 0; flex:none; perspective:none; }
#menu .orb-btn.menu-destination {
  position:relative; display:flex; align-items:center; justify-content:center; flex-direction:row;
  width:100%; min-width:0; height:clamp(64px,12vw,144px); margin:0; padding:0 28px;
  border:0; border-radius:26px 76px 26px 54px;
  background:#0b304d; color:#f3fbff; box-shadow:none;
  font-family:Hanimation,system-ui,sans-serif; font-size:clamp(22px,4.2vw,48px); font-weight:700; line-height:1.35;
  text-align:center; text-decoration:none; letter-spacing:normal; cursor:pointer; touch-action:manipulation;
  transition:none; isolation:isolate;
  backdrop-filter:none; -webkit-backdrop-filter:none; animation:none;
}
#menu .orb-btn.menu-destination::before,#menu .orb-btn.menu-destination::after { content:none; }
#menu .destination-shell {
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:block; border-radius:inherit;
  border:1px solid rgba(120,217,237,.62);
  background:radial-gradient(ellipse at 100% 0%,rgba(70,191,208,.52),transparent 43%),linear-gradient(118deg,#194d70 0%,#103553 40%,#092a46 75%);
  box-shadow:inset 0 2px 0 rgba(226,251,255,.3),inset 0 -2px 0 rgba(2,20,38,.48),0 7px 0 -2px #0a748e,0 15px 24px rgba(2,22,39,.23);
  pointer-events:none; transform-origin:center; overflow:hidden; overflow:clip;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
#menu .destination-shell::before {
  content:''; position:absolute; width:35%; height:150%; right:-8%; top:-32%;
  border-radius:50%; border:1px solid rgba(99,228,241,.35);
  background:linear-gradient(150deg,rgba(12,178,227,.06),rgba(70,191,208,.24));
  box-shadow:-21px 4px 0 1px rgba(12,178,227,.13),-45px 10px 0 1px rgba(16,92,170,.11);
  transform:rotate(-20deg);
}
#menu .destination-shell::after {
  content:''; position:absolute; left:7%; right:29%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,#c5f4fc,transparent); opacity:.8;
}
#menu .destination-fold {
  position:absolute; top:3px; right:3px; bottom:3px; left:3px; inset:3px; display:block; border-radius:inherit; opacity:.08;
  border:1px solid rgba(181,244,250,.7); transform-origin:50% 50%;
  background:linear-gradient(135deg,rgba(16,92,170,.65),rgba(12,178,227,.23) 44%,rgba(70,191,208,.62));
  backface-visibility:visible;
}
#menu .destination-shine {
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; display:block; opacity:0;
  background:linear-gradient(90deg,transparent 18%,rgba(211,251,255,.1) 35%,rgba(210,252,255,.52) 48%,rgba(210,252,255,.04) 60%,transparent 73%);
  transform:translateX(-115%) skewX(-22deg);
}
#menu .destination-label { position:relative; z-index:2; display:block; padding:0; margin:0; font:inherit; line-height:inherit; color:inherit; text-shadow:0 1px 1px rgba(0,17,35,.25); pointer-events:none; }
#menu .orb-btn.menu-destination:nth-child(even) { border-radius:76px 26px 54px 26px; }
#menu .orb-btn.menu-destination:nth-child(even) .destination-shell::before { right:auto; left:-8%; transform:rotate(20deg); }
#menu .orb-btn.menu-destination.is-illuminated .destination-shell { border-color:#b0f4ff; box-shadow:inset 0 2px 0 rgba(236,255,255,.5),inset 0 -2px 0 rgba(2,20,38,.38),0 7px 0 -2px #1699b5,0 15px 28px rgba(2,22,39,.23); }
@media (hover:hover) {
  #menu .orb-btn.menu-destination:hover .destination-shell { border-color:#b0f4ff; }
}
#menu .orb-btn.menu-destination:active .destination-shell,#menu .orb-btn.menu-destination.lit .destination-shell { border-color:#d7fbff; box-shadow:inset 0 2px 5px rgba(0,28,51,.28),0 3px 0 -1px #0d819c,0 10px 20px rgba(3,24,41,.2); }
#menu .orb-btn.menu-destination:focus-visible { outline:3px solid #b0f4ff; outline-offset:7px; }
body.light #menu .orb-btn.menu-destination { color:#133f60; background:#d8edf5; }
body.light #menu .destination-shell { border-color:rgba(29,120,157,.45); background:radial-gradient(ellipse at 100% 0%,rgba(70,191,208,.18),transparent 44%),linear-gradient(118deg,#fff 0%,#eef9fc 43%,#c8e7f1 100%); box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(28,108,144,.09),0 7px 0 -2px #92cbdc,0 15px 24px rgba(26,75,101,.11); }
body.light #menu .destination-shell::before { border-color:rgba(19,109,155,.22); background:linear-gradient(150deg,rgba(12,178,227,.03),rgba(70,191,208,.14)); box-shadow:-21px 4px 0 1px rgba(12,178,227,.08),-45px 10px 0 1px rgba(16,92,170,.045); }
body.light #menu .destination-fold { border-color:rgba(8,123,161,.28); background:linear-gradient(135deg,rgba(16,92,170,.18),rgba(12,178,227,.06) 44%,rgba(70,191,208,.28)); }
body.light #menu .destination-label { text-shadow:none; }
body.light #menu .orb-btn.menu-destination.is-illuminated .destination-shell { border-color:#238dae; box-shadow:inset 0 2px 0 #fff,0 7px 0 -2px #51b1c8,0 15px 28px rgba(26,75,101,.14); }
body.light #menu .orb-btn.menu-destination:focus-visible { outline-color:#126a98; }

/* Home is physically upper-right; appearance and motion stay upper-left. */
#menu .menu-controls { position:absolute; top:max(clamp(16px,2vw,28px),env(safe-area-inset-top)); left:max(clamp(16px,2vw,28px),env(safe-area-inset-left)); display:flex; align-items:center; gap:clamp(8px,1vw,12px); direction:ltr; max-width:calc(100% - 32px); }
#menu .back-home { position:absolute!important; top:max(clamp(16px,2vw,28px),env(safe-area-inset-top))!important; right:max(clamp(16px,2vw,28px),env(safe-area-inset-right))!important; left:auto!important; bottom:auto!important; }
#menu .back-home,#menu .menu-controls .theme-btn,#menu .menu-controls .motion-btn {
  position:static; inset:auto; display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-height:clamp(44px,5.5vw,64px); height:clamp(44px,5.5vw,64px); margin:0; padding:0 clamp(12px,1.8vw,22px); gap:clamp(6px,1vw,11px);
  border:1px solid var(--ui-line); border-radius:999px; background:#173d59; color:var(--ui-ink);
  font:500 clamp(12px,1.85vw,21px)/1.5 Hanimation,system-ui,sans-serif; direction:rtl;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1); transform:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; cursor:pointer;
  transition:border-color 180ms ease,background-color 180ms ease;
}
#menu .menu-controls .theme-btn { display:grid; padding:0; width:clamp(44px,5.5vw,64px); }
#menu .back-home::before,#menu .back-home::after,#menu .menu-controls .theme-btn::before,#menu .menu-controls .motion-btn::before,#menu .menu-controls .theme-btn::after,#menu .menu-controls .motion-btn::after { content:none; }
#menu .back-home svg,#menu .menu-controls svg { width:clamp(17px,2.4vw,26px); height:clamp(17px,2.4vw,26px); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#menu .motion-symbol { font:600 clamp(16px,2.1vw,24px)/1 system-ui,sans-serif; min-width:15px; }
#menu .motion-label { display:inline; }
#menu .motion-btn[data-state="paused"] { border-color:var(--ui-accent); }
#menu .motion-btn:disabled { opacity:.55; cursor:default; }
body.light #menu .back-home,body.light #menu .menu-controls .theme-btn,body.light #menu .menu-controls .motion-btn { background:#edf7fc; }
#menu .credits { position:static; inset:auto; width:100%; flex:none; margin:clamp(22px,3.1vw,38px) 0 0; color:var(--ui-muted); font-size:clamp(9px,1.3vw,14px); line-height:1.7; opacity:.85; text-shadow:none; pointer-events:none; }

@media (min-aspect-ratio:1/1) {
  #menu.layer { padding:82px 30px 30px; }
  #menu .menu-brand { gap:12px; margin-bottom:25px; }
  #menu .menu-brand-cloud { width:70px; }
  #menu .menu-brand-word { width:205px; }
  #menu .menu-slogan { font-size:18px; }
  #menu .menu-hello { font-size:18px; }
  #menu .menu-title { font-size:clamp(36px,5.7vh,56px); }
  #menu .orbs.menu-destinations { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(880px,92vw); gap:clamp(12px,2vh,20px); margin-top:clamp(23px,4vh,38px); }
  #menu .orb-btn.menu-destination { height:clamp(56px,12vh,94px); font-size:clamp(22px,3.8vh,34px); }
  #menu .credits { font-size:11px; margin-top:22px; }
  #menu .back-home,#menu .menu-controls .theme-btn,#menu .menu-controls .motion-btn { height:46px; min-height:46px; font-size:14px; padding-left:15px; padding-right:15px; }
  #menu .menu-controls .theme-btn { width:46px; padding:0; }
  #menu .back-home svg,#menu .menu-controls svg { width:20px; height:20px; }
  #menu .motion-symbol { font-size:18px; }
}
@media (max-width:540px) and (max-aspect-ratio:1/1) {
  #menu.layer { padding:72px 16px 20px; }
  #menu .menu-brand { gap:8px; margin-bottom:16px; }
  #menu .menu-brand-cloud { width:48px; }
  #menu .menu-brand-word { width:142px; }
  #menu .menu-slogan { font-size:13px; line-height:1.65; }
  #menu .menu-hello { font-size:14px; }
  #menu .menu-title { font-size:clamp(26px,7vw,34px); line-height:1.35; }
  #menu .orbs.menu-destinations { width:90vw; gap:12px; margin-top:18px; }
  #menu .orb-btn.menu-destination { height:clamp(52px,8vh,68px); font-size:clamp(19px,5vw,24px); border-radius:20px 44px 20px 34px; }
  #menu .orb-btn.menu-destination:nth-child(even) { border-radius:44px 20px 34px 20px; }
  #menu .motion-label { display:none; }
  #menu .menu-controls .motion-btn { width:44px; padding-left:0; padding-right:0; }
}
@media (max-height:680px) and (max-aspect-ratio:1/1) {
  #menu.layer { padding:78px 16px 22px; }
  #menu .menu-brand { gap:10px; margin-bottom:22px; }
  #menu .menu-brand-cloud { width:49px; }
  #menu .menu-brand-word { width:145px; }
  #menu .menu-slogan { max-width:26em; font-size:13px; line-height:1.8; }
  #menu .menu-hello { font-size:14px; }
  #menu .menu-title { font-size:34px; line-height:1.4; }
  #menu .orbs.menu-destinations { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:17px 12px; margin-top:22px; }
  #menu .orb-btn.menu-destination { height:76px; padding:0 12px; font-size:22px; }
  #menu .orb-btn.menu-destination { border-radius:18px 37px 18px 29px; }
  #menu .orb-btn.menu-destination:nth-child(even) { border-radius:37px 18px 29px 18px; }
  #menu .menu-controls { gap:7px; }
  #menu .motion-label { display:none; }
  #menu .menu-controls .motion-btn { width:44px; padding-left:0; padding-right:0; }
  #menu .credits { margin-top:20px; font-size:8px; }
}
@media (max-height:520px) and (min-aspect-ratio:1/1) {
  #menu.layer { padding:64px 28px 12px; }
  #menu .menu-brand { gap:5px; margin-bottom:8px; }
  #menu .menu-brand-cloud { width:42px; }
  #menu .menu-brand-word { width:130px; }
  #menu .menu-slogan { font-size:12px; line-height:1.6; }
  #menu .menu-hello { font-size:12px; line-height:1.5; }
  #menu .menu-title { font-size:29px; line-height:1.3; margin:0; }
  #menu .orbs.menu-destinations { width:min(760px,94vw); gap:10px; margin-top:14px; }
  #menu .orb-btn.menu-destination { height:56px; font-size:22px; }
  #menu .credits { font-size:8px; margin-top:10px; }
  #menu .menu-controls { top:12px; left:16px; }
  #menu .back-home { top:12px!important; right:16px!important; }
  #menu .back-home,#menu .menu-controls .theme-btn,#menu .menu-controls .motion-btn { height:44px; min-height:44px; font-size:12px; }
  #menu .menu-controls .theme-btn { width:44px; }
}
@media (prefers-reduced-motion:reduce) {
  #menu .orb-btn.menu-destination,#menu .destination-shell,#menu .menu-controls * { transition:none!important; }
}