/* ═══════════════════════════════════════════════════════════
   THE ATLANTIC — Seafood Restaurant & Bar, Bhaktapur
   Aesthetic: oceanic noir — abyssal teals, candlelight gold
   ═══════════════════════════════════════════════════════════ */

:root {
  --abyss:   #020d14;
  --deep:    #04212f;
  --mid:     #0b3a52;
  --surface: #2e7da0;
  --foam:    #e8f3f3;
  --mist:    #9dbcc6;
  --gold:    #c9a368;
  --gold-soft: #e3cba0;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--abyss);
  color: var(--foam);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--abyss); }

img { display: block; width: 100%; height: 100%; object-fit: cover; }

a { color: inherit; text-decoration: none; }

em { font-style: italic; }

/* ── scrollbar ── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: var(--mid); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ═══════════ GRAIN ═══════════ */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 10% { transform: translate(-5%,-10%); }
  20% { transform: translate(-15%,5%); } 30% { transform: translate(7%,-25%); }
  40% { transform: translate(-5%,25%); } 50% { transform: translate(-15%,10%); }
  60% { transform: translate(15%,0); }  70% { transform: translate(0,15%); }
  80% { transform: translate(3%,35%); } 90% { transform: translate(-10%,10%); }
}

/* ═══════════ PRELOADER ═══════════ */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--abyss);
  display: flex; align-items: center; justify-content: center;
}
.preloader__inner { text-align: center; }
.preloader__word {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: .35em;
  color: var(--foam);
}
.preloader__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.preloader__word span:nth-child(n) { animation-delay: calc(.05s * var(--i, 0)); }
.preloader__word span:nth-child(1) { --i:1 } .preloader__word span:nth-child(2) { --i:2 }
.preloader__word span:nth-child(3) { --i:3 } .preloader__word span:nth-child(4) { --i:4 }
.preloader__word span:nth-child(5) { --i:5 } .preloader__word span:nth-child(6) { --i:6 }
.preloader__word span:nth-child(7) { --i:7 } .preloader__word span:nth-child(8) { --i:8 }
.preloader__word span:nth-child(9) { --i:9 } .preloader__word span:nth-child(10) { --i:10 }
.preloader__word span:nth-child(11) { --i:11 } .preloader__word span:nth-child(12) { --i:12 }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.preloader__wave {
  width: 120px; margin: 1.2rem auto .8rem;
  color: var(--gold);
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: dash 1.6s .5s ease forwards;
}
@keyframes dash { to { stroke-dashoffset: 0; } }
.preloader__sub {
  font-size: .75rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--mist); opacity: 0;
  animation: fadein .8s 1s forwards;
}
@keyframes fadein { to { opacity: 1; } }
.preloader.is-done { transition: opacity .8s ease, visibility .8s; opacity: 0; visibility: hidden; }

/* ═══════════ NAV ═══════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.5rem);
  transition: background .5s ease, padding .5s ease, backdrop-filter .5s ease;
}
.nav.is-scrolled {
  background: rgba(2, 13, 20, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: .9rem; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(232,243,243,.06);
}
.nav__logo { display: flex; align-items: center; gap: .7rem; }
.nav__logo-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif); font-size: 1.25rem; color: var(--gold);
}
.nav__logo-text {
  font-family: var(--serif); font-size: 1.25rem; letter-spacing: .08em;
}
.nav__links { display: flex; gap: 2.2rem; }
.nav__links a {
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mist); position: relative; padding: .2rem 0;
  transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover { color: var(--foam); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,163,104,.5);
  padding: .65rem 1.5rem; border-radius: 99px;
  transition: background .35s, color .35s, border-color .35s;
}
.nav__cta:hover { background: var(--gold); color: var(--abyss); border-color: var(--gold); }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; width: 34px; height: 26px; position: relative; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--foam); transition: transform .4s, top .4s;
}
.nav__burger span:first-child { top: 7px; }
.nav__burger span:last-child { top: 17px; }
body.menu-open .nav__burger span:first-child { top: 12px; transform: rotate(45deg); }
body.menu-open .nav__burger span:last-child { top: 12px; transform: rotate(-45deg); }

.mobmenu {
  position: fixed; inset: 0; z-index: 850;
  background: rgba(2,13,20,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
body.menu-open .mobmenu { opacity: 1; visibility: visible; }
.mobmenu a {
  font-family: var(--serif); font-size: 2rem; color: var(--foam);
}
.mobmenu__cta { color: var(--gold) !important; font-size: 1.4rem !important; margin-top: 1rem; }

/* ═══════════ THE DIVE ═══════════ */
.dive { position: relative; height: 100vh; overflow: hidden; }
.dive__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dive__gauge {
  position: absolute; right: clamp(1rem, 3.5vw, 3rem); top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--sans);
}
.dive__gauge-num {
  font-size: 1.5rem; font-weight: 200; color: var(--foam);
  font-variant-numeric: tabular-nums;
}
.dive__gauge-unit { font-size: .7rem; color: var(--mist); letter-spacing: .2em; margin-top: -.6rem; }
.dive__gauge-track {
  width: 1px; height: 30vh; background: rgba(232,243,243,.18);
  position: relative;
}
.dive__gauge-fill {
  position: absolute; top: 0; left: -0.5px; width: 2px; height: 0%;
  background: linear-gradient(var(--gold-soft), var(--gold));
}
.dive__gauge-label {
  font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: var(--mist);
  writing-mode: vertical-rl;
}

.dive__caption {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  opacity: 0;
  pointer-events: none;
}
.dive__caption::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 68% 52% at 50% 50%, rgba(2, 13, 20, .62), rgba(2, 13, 20, .25) 55%, transparent 74%);
}
.dive__eyebrow {
  font-size: .72rem; letter-spacing: .45em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 1.4rem;
  text-shadow: 0 1px 22px rgba(2,13,20,.95), 0 1px 6px rgba(2,13,20,.7);
}
.dive__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 9rem);
  letter-spacing: .06em; line-height: 1;
  color: var(--foam);
  text-shadow: 0 4px 60px rgba(2,13,20,.6);
}
.dive__hint {
  margin-top: 2.6rem;
  font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: #cfe2e8;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-shadow: 0 1px 22px rgba(2,13,20,.95), 0 1px 6px rgba(2,13,20,.7);
}
.dive__hint-arrow { animation: bob 2s ease-in-out infinite; font-size: 1rem; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.dive__line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6.5vw, 5.2rem);
  line-height: 1.15; color: var(--foam);
  text-shadow: 0 4px 50px rgba(2,13,20,.7);
}
.dive__line em { color: var(--gold-soft); }

/* ═══════════ SHARED ═══════════ */
.eyebrow {
  font-size: .72rem; letter-spacing: .45em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.6rem; display: block;
}
.eyebrow--light { color: var(--gold-soft); }

[data-reveal] { opacity: 0; transform: translateY(46px); }

.btn {
  display: inline-block;
  font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold);
  padding: 1.05rem 2.6rem; border-radius: 99px;
  transition: background .35s, color .35s, transform .35s;
}
.btn:hover { background: var(--gold); color: var(--abyss); transform: translateY(-2px); }
.btn--big { font-size: .9rem; padding: 1.3rem 3.4rem; margin-top: 3rem; }
.btn--ghost { border-color: rgba(232,243,243,.35); color: var(--foam); }
.btn--ghost:hover { background: var(--foam); border-color: var(--foam); color: var(--abyss); }

/* ═══════════ THE DEEP (about) ═══════════ */
.deep {
  position: relative;
  background: linear-gradient(var(--abyss), var(--deep) 65%, var(--abyss));
  padding: clamp(6rem, 14vh, 11rem) clamp(1.4rem, 6vw, 7rem);
}
.deep__inner { max-width: 1200px; margin: 0 auto; }
.deep__heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  line-height: 1.02; margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.deep__heading em { color: var(--gold-soft); }
.rl { display: block; }
.rl--indent { margin-left: clamp(2rem, 12vw, 11rem); }
.deep__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1000px;
  color: var(--mist);
}
.deep__cols strong { color: var(--foam); font-weight: 400; }
.deep__stats {
  display: flex; gap: clamp(2.5rem, 8vw, 7rem);
  margin-top: clamp(3.5rem, 8vh, 6rem);
  padding-top: 2.6rem;
  border-top: 1px solid rgba(232,243,243,.1);
}
.deep__stat-num {
  display: block; font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem); color: var(--gold-soft); line-height: 1;
}
.deep__stat-label {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--mist);
}

/* ═══════════ MARQUEE ═══════════ */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid rgba(232,243,243,.08);
  border-bottom: 1px solid rgba(232,243,243,.08);
  padding: 1.1rem 0;
  background: var(--abyss);
}
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__track span {
  font-family: var(--serif); font-style: italic;
  font-size: 1.35rem; color: var(--mist);
  padding-right: 1rem;
}

/* ═══════════ MENU — horizontal voyage ═══════════ */
.menu { background: var(--abyss); }
.menu__pin {
  height: 100vh; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: clamp(4rem, 10vh, 7rem) 0 0;
}
.menu__head { padding: 0 clamp(1.4rem, 6vw, 7rem); margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.menu__heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1;
}
.menu__heading em { color: var(--gold-soft); }
.menu__track {
  display: flex; gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding: 0 clamp(1.4rem, 6vw, 7rem);
  width: max-content;
  align-items: stretch;
}
.dish {
  width: clamp(280px, 34vw, 460px);
  flex-shrink: 0;
  position: relative;
}
.dish__imgwrap {
  aspect-ratio: 4 / 3.4;
  overflow: hidden; border-radius: 4px;
  position: relative;
}
.dish__imgwrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2,13,20,.55));
}
.dish__imgwrap img { transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.dish:hover .dish__imgwrap img { transform: scale(1.06); }
.dish__meta { padding: 1.4rem .2rem 0; position: relative; }
.dish__num {
  position: absolute; right: .2rem; top: 1.15rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1rem; color: var(--gold);
}
.dish__name {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.55rem; line-height: 1.2; margin-bottom: .5rem;
  padding-right: 2.5rem;
}
.dish__desc { font-size: .92rem; color: var(--mist); margin-bottom: .9rem; max-width: 36ch; }
.dish__price {
  font-size: .8rem; letter-spacing: .2em; color: var(--gold);
}
.dish--cta {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(232,243,243,.12); border-radius: 4px;
  min-height: 320px;
}
.dish__ctainner { text-align: center; padding: 2rem; }
.dish__ctainner p {
  font-family: var(--serif); font-style: italic;
  font-size: 1.7rem; line-height: 1.3; color: var(--mist);
  margin-bottom: 2rem;
}

/* ═══════════ THE RITUAL — scroll-scrubbed film ═══════════ */
.ritual { background: #000; }
.ritual__pin {
  position: relative; height: 100vh; overflow: hidden;
}
.ritual__frames { position: absolute; inset: 0; }
.ritual__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
}
.ritual__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.ritual__shade {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 26%, transparent 60%, rgba(0,0,0,.78) 100%);
}
.ritual__kicker {
  position: absolute; top: 7rem; left: 50%; transform: translateX(-50%);
  z-index: 5;
  font-size: .72rem; letter-spacing: .45em; text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 1px 18px rgba(0,0,0,.9);
  white-space: nowrap;
}
.ritual__caption {
  position: absolute; left: 0; right: 0; bottom: clamp(4.5rem, 12vh, 8rem);
  z-index: 5; text-align: center; padding: 0 1.5rem;
  opacity: 0;
  pointer-events: none;
}
.ritual__act {
  font-size: .7rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 1rem;
  text-shadow: 0 1px 18px rgba(0,0,0,.95);
}
.ritual__line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.1;
  color: var(--foam);
  text-shadow: 0 4px 40px rgba(0,0,0,.85);
}
.ritual__line em { color: var(--gold-soft); }
.ritual__steps {
  position: absolute; right: clamp(1rem, 3.5vw, 3rem); top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  font-family: var(--serif); font-size: .95rem; color: rgba(232,243,243,.45);
}
.ritual__step { transition: color .4s; }
.ritual__step.is-active { color: var(--gold); }
.ritual__steps-bar {
  order: -1;
  position: relative;
  width: 1px; height: 16vh; background: rgba(232,243,243,.18);
}
.ritual__steps-fill {
  position: absolute; top: 0; left: -0.5px; width: 2px; height: 0%;
  background: linear-gradient(var(--gold-soft), var(--gold));
}

/* ═══════════ AQUARIUM ═══════════ */
.aquarium {
  position: relative; min-height: 130vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.aquarium__media { position: absolute; inset: -12% 0; z-index: 1; }
.aquarium__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, var(--abyss) 0%, transparent 28%, transparent 55%, rgba(2,13,20,.92) 100%);
}
.aquarium__content {
  position: relative; z-index: 3;
  padding: 0 clamp(1.4rem, 6vw, 7rem) clamp(5rem, 12vh, 9rem);
  max-width: 880px;
}
.aquarium__heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.8rem, 7.5vw, 6.5rem); line-height: 1.05;
  margin-bottom: 1.8rem;
}
.aquarium__heading em { color: var(--gold-soft); }
.aquarium__text { color: #c4d8de; max-width: 56ch; font-size: 1.05rem; }

/* ═══════════ BAR ═══════════ */
.bar {
  background: linear-gradient(var(--abyss), var(--deep) 70%, var(--abyss));
  padding: clamp(6rem, 16vh, 12rem) clamp(1.4rem, 6vw, 7rem);
}
.bar__grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: .85fr 1fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.bar__media { position: relative; }
.bar__imgwrap {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px;
}
.bar__caption {
  display: block; margin-top: 1rem;
  font-family: var(--serif); font-style: italic;
  color: var(--mist); font-size: .98rem;
}
.bar__heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.05;
  margin-bottom: 1.6rem;
}
.bar__heading em { color: var(--gold-soft); }
.bar__content > p { color: var(--mist); max-width: 52ch; }
.bar__list { list-style: none; margin-top: 2.4rem; }
.bar__list li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(232,243,243,.09);
  font-size: 1rem;
}
.bar__list li span:first-child { font-family: var(--serif); font-size: 1.2rem; }
.bar__list li i {
  flex: 1; border-bottom: 1px dotted rgba(157,188,198,.35);
  transform: translateY(-4px);
}
.bar__list li span:last-child { color: var(--gold); font-size: .85rem; letter-spacing: .12em; }

/* ═══════════ VISIT ═══════════ */
.visit {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(11,58,82,.55), transparent),
    var(--abyss);
  padding: clamp(6rem, 16vh, 12rem) clamp(1.4rem, 6vw, 7rem);
  text-align: center;
}
.visit__inner { max-width: 1100px; margin: 0 auto; }
.visit__heading {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 9vw, 8rem); line-height: 1.02;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.visit__heading em { color: var(--gold-soft); }
.visit__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(232,243,243,.1);
  padding-top: 3rem;
}
.visit__block h3 {
  font-size: .72rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; margin-bottom: 1.1rem;
}
.visit__block p { color: var(--mist); }
.visit__link { color: var(--foam); border-bottom: 1px solid rgba(201,163,104,.4); transition: color .3s, border-color .3s; }
.visit__link:hover { color: var(--gold-soft); border-color: var(--gold); }

/* ═══════════ FOOTER ═══════════ */
.footer {
  background: var(--abyss);
  border-top: 1px solid rgba(232,243,243,.07);
  padding: clamp(3rem, 7vh, 5rem) clamp(1.4rem, 6vw, 7rem) 2.4rem;
  overflow: hidden;
}
.footer__word {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(4rem, 16vw, 15rem);
  line-height: .9; text-align: center;
  letter-spacing: .08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(157,188,198,.22);
  user-select: none;
  margin-bottom: 3rem;
}
.footer__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist);
}
.footer__row a { color: var(--gold); }
.footer__row a:hover { color: var(--gold-soft); }

/* ═══════════ BACK TO SURFACE ═══════════ */
.totop {
  position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3.5vh, 2.2rem);
  z-index: 800;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(2, 13, 20, .55);
  border: 1px solid rgba(201, 163, 104, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .45s ease, visibility .45s, transform .45s ease,
              background .35s, color .35s;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--gold); color: var(--abyss); border-color: var(--gold); }
.totop__arrow { font-size: 1.05rem; line-height: 1; animation: bob-up 2.4s ease-in-out infinite; }
@keyframes bob-up { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.totop__label {
  font-family: var(--sans);
  font-size: .52rem; letter-spacing: .28em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .totop__arrow { animation: none; } }

/* ═══════════ CURSOR ═══════════ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9500;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, opacity .3s, background .3s;
  opacity: 0;
  mix-blend-mode: screen;
}
.cursor.is-active { opacity: .9; }
.cursor.is-hover { width: 46px; height: 46px; background: rgba(201,163,104,.25); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .deep__cols { grid-template-columns: 1fr; }
  .bar__grid { grid-template-columns: 1fr; }
  .visit__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .cursor { display: none; }
  .aquarium { min-height: 100vh; }

  /* menu falls back to native swipe */
  .menu__pin { height: auto; padding-bottom: 4rem; }
  .menu__track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  .menu__track::-webkit-scrollbar { height: 4px; }
  .dish { scroll-snap-align: start; width: min(78vw, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .dive__hint-arrow { animation: none; }
}