/* ============================================================
   Interactive Portfolio Plaza
   Palette pulled from the image: warm golden signage on a
   deep dusk-blue plaza.
   ============================================================ */
:root {
  --img-w: 1672;
  --img-h: 941;

  --gold:      #d9b45b;   /* engraved sign gold      */
  --gold-lit:  #f0d592;   /* the glow when lit       */
  --ink:       #0b0d12;   /* deep dusk background     */
  --ink-2:     #161a24;
  --cream:     #efe7d6;

  --label-font: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --italic-font: "Cormorant Garamond", Georgia, serif;   /* true italic accent */
  --ui-font:    "Jost", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* dusk gradient fills any letterbox area around the image */
  background:
    radial-gradient(120% 90% at 50% 0%, #2a3247 0%, var(--ink-2) 42%, var(--ink) 100%);
  color: var(--cream);
  font-family: var(--ui-font);
  /* Marcellus ships upright-only; never let the browser fake bold/italic on it.
     The real Cormorant italic accent is a genuine face, so it's unaffected. */
  font-synthesis: none;
  overflow: hidden;
}

/* ---------- The stage keeps the exact image aspect ratio ---------- */
.stage {
  position: relative;
  width: min(100vw, calc(100dvh * var(--img-w) / var(--img-h)));
  aspect-ratio: var(--img-w) / var(--img-h);
  margin: auto;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.7);
}

.stage picture { display: contents; }
.stage__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Hotspots ---------- */
.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;      /* invisible by default */
  border-radius: 14px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Warm architectural light: brightens the real facade & windows underneath,
   feathered at the edges so it reads as light falling on the building —
   not a rectangle. No neon, no hard glow. */
.hotspot::before {
  content: "";
  position: absolute;
  inset: -2%;
  border-radius: inherit;
  /* gentle warm wash layered over the brightened building */
  background: radial-gradient(
    ellipse at 50% 56%,
    rgba(255, 206, 138, 0.22) 0%,
    rgba(255, 188, 120, 0.10) 44%,
    rgba(255, 180, 110, 0) 72%
  );
  /* the actual illumination — acts on the underlying image pixels */
  -webkit-backdrop-filter: brightness(1.13) contrast(1.02) saturate(1.06);
  backdrop-filter: brightness(1.13) contrast(1.02) saturate(1.06);
  /* feather so the lit area has no visible rectangular edge */
  -webkit-mask-image: radial-gradient(ellipse at 50% 56%, #000 40%, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 56%, #000 40%, transparent 74%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

/* Thin gold hairline — used only for keyboard focus, reveal mode & intro,
   never for mouse hover. */
.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(240, 213, 146, 0.5);
  box-shadow: 0 0 16px -2px rgba(217, 180, 91, 0.22);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ---------- Information card (glassmorphism) ---------- */
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  /* --tx/--ty let edge buildings nudge their card inward (set per hotspot) */
  transform: translate(var(--tx, -50%), var(--ty, -50%));
  width: clamp(210px, 19vw, 264px);
  padding: 1.15rem 1.3rem 1.1rem;
  text-align: left;
  color: var(--cream);
  background: linear-gradient(158deg,
    rgba(26, 30, 40, 0.58) 0%,
    rgba(12, 15, 22, 0.44) 100%);
  border: 1px solid rgba(240, 213, 146, 0.22);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(18px) saturate(122%);
  backdrop-filter: blur(18px) saturate(122%);
  box-shadow:
    0 24px 60px -22px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}
/* inner wrapper carries the soft upward drift, keeping card centering clean */
.card__inner {
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card__name {
  font-family: var(--label-font);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.card__name::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0.7rem 0 0.75rem;
  background: linear-gradient(90deg, rgba(217, 180, 91, 0.9), rgba(217, 180, 91, 0));
}
.card__desc {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: 0.02em;
  color: rgba(239, 231, 214, 0.72);
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1rem;
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.card__arrow {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- Alive state: keyboard focus / active tap (always) ----- */
.hotspot:focus-visible,
.hotspot.is-active {
  transform: scale(1.02);
}
.hotspot:focus-visible::before,
.hotspot.is-active::before {
  opacity: 1;
}
/* thin outline only for keyboard focus (accessibility) */
.hotspot:focus-visible::after {
  opacity: 1;
}
.hotspot:focus-visible .card,
.hotspot.is-active .card {
  opacity: 1;
}
.hotspot:focus-visible .card__inner,
.hotspot.is-active .card__inner {
  transform: translateY(0);
}
.hotspot:focus-visible .card__arrow,
.hotspot.is-active .card__arrow {
  transform: translateX(4px);
}
/* ----- Hover reveals only on hover-capable pointers (no sticky state on touch) ----- */
@media (hover: hover) {
  .hotspot:hover { transform: scale(1.02); }
  .hotspot:hover::before { opacity: 1; }
  .hotspot:hover .card { opacity: 1; }
  .hotspot:hover .card__inner { transform: translateY(0); }
  .hotspot:hover .card__arrow { transform: translateX(4px); }
}

/* ============================================================
   SECTION 4 · Computer Experience — the centerpiece "wakes up"
   Layers aligned to the iMac inside the Portfolio Pavilion hotspot.
   ============================================================ */
/* soften the generic building wash so the bespoke layers lead */
.hotspot--computer::before {
  background: radial-gradient(ellipse at 54% 34%,
    rgba(255, 206, 138, 0.12), transparent 70%);
  -webkit-backdrop-filter: brightness(1.06) saturate(1.03);
  backdrop-filter: brightness(1.06) saturate(1.03);
}

.pc {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* warm glow blooming behind the screen */
.pc__glow {
  position: absolute;
  left: 54%;
  top: 33%;
  width: 80%;
  height: 64%;
  transform: translate(-50%, -50%) scale(0.9);
  background: radial-gradient(ellipse at center,
    rgba(255, 208, 142, 0.68) 0%,
    rgba(255, 176, 108, 0.30) 42%,
    transparent 72%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* the monitor powering on — a luminous fill that ADDS light to the dark
   screen (brightening alone can't lift near-black pixels) */
.pc__screen {
  position: absolute;
  left: 16%;
  top: 12%;
  width: 76%;
  height: 40%;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(255, 251, 240, 0.60) 0%,
    rgba(222, 231, 250, 0.34) 46%,
    rgba(180, 200, 240, 0.10) 74%,
    transparent 88%);
  -webkit-backdrop-filter: brightness(1.22) contrast(1.05);
  backdrop-filter: brightness(1.22) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 70%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 70%, transparent 96%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
/* a soft light sweep travels across the screen as it wakes */
.pc__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 34%, rgba(255, 255, 255, 0.4) 50%, transparent 66%);
  transform: translateX(-130%);
  opacity: 0;
}

/* the keyboard / desk catching a little light */
.pc__keys {
  position: absolute;
  left: 26%;
  top: 63%;
  width: 56%;
  height: 20%;
  background: radial-gradient(ellipse at center,
    rgba(255, 198, 136, 0.26), transparent 74%);
  -webkit-backdrop-filter: brightness(1.2) saturate(1.06);
  backdrop-filter: brightness(1.2) saturate(1.06);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease 0.12s;
}

/* --- wake sequence: glow → screen (with faint flicker) → keyboard --- */
.hotspot--computer:hover .pc__glow,
.hotspot--computer:focus-visible .pc__glow,
.hotspot--computer.is-active .pc__glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.hotspot--computer:hover .pc__screen,
.hotspot--computer:focus-visible .pc__screen,
.hotspot--computer.is-active .pc__screen {
  opacity: 1;
  animation: pcScreenWake 0.9s ease-out 0.09s both;
}
.hotspot--computer:hover .pc__screen::after,
.hotspot--computer:focus-visible .pc__screen::after,
.hotspot--computer.is-active .pc__screen::after {
  animation: pcSweep 1.1s ease-out 0.15s both;
}
.hotspot--computer:hover .pc__keys,
.hotspot--computer:focus-visible .pc__keys,
.hotspot--computer.is-active .pc__keys {
  opacity: 1;
}

@keyframes pcScreenWake {
  0%   { opacity: 0; }
  18%  { opacity: 0.6; }   /* first glimmer */
  30%  { opacity: 0.35; }  /* subtle settle */
  60%  { opacity: 0.92; }
  100% { opacity: 1; }
}
@keyframes pcSweep {
  0%   { transform: translateX(-130%); opacity: 0; }
  15%  { opacity: 0.9; }
  60%  { opacity: 0.5; }
  100% { transform: translateX(130%); opacity: 0; }
}


/* ---------- "Reveal areas" mode: thin gold hairline framing each region ---------- */
.stage.reveal .hotspot {
  background: rgba(240, 213, 146, 0.045);   /* barely-there glass panel */
}
.stage.reveal .hotspot::after {
  border-color: rgba(240, 213, 146, 0.34);  /* thin, soft — never harsh */
  box-shadow:
    0 0 22px -8px rgba(217, 180, 91, 0.28),
    inset 0 0 30px -14px rgba(240, 213, 146, 0.25);
  opacity: 0;
  animation: revealIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* soft, staggered appearance across the six regions */
.stage.reveal .hotspot:nth-of-type(1)::after { animation-delay: 0.04s; }
.stage.reveal .hotspot:nth-of-type(2)::after { animation-delay: 0.11s; }
.stage.reveal .hotspot:nth-of-type(3)::after { animation-delay: 0.18s; }
.stage.reveal .hotspot:nth-of-type(4)::after { animation-delay: 0.25s; }
.stage.reveal .hotspot:nth-of-type(5)::after { animation-delay: 0.32s; }
.stage.reveal .hotspot:nth-of-type(6)::after { animation-delay: 0.39s; }

/* ---------- One-time intro pulse to hint where hotspots live ---------- */
.stage.intro .hotspot::before { animation: introGlow 1.7s ease-in-out 2; }
.stage.intro .hotspot::after  { animation: introRing 1.7s ease-in-out 2; }

@keyframes introGlow { 0%, 100% { opacity: 0; } 50% { opacity: 0.6; } }
@keyframes introRing { 0%, 100% { opacity: 0; } 50% { opacity: 0.9; } }
@keyframes revealIn {
  0%   { opacity: 0; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Chrome: eyebrow, toggle, hint, toast ---------- */
.eyebrow {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 22px;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(239, 231, 214, 0.75);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 5;
}

.hint {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5em 1.1em;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(239, 231, 214, 0.82);
  background: rgba(11, 13, 18, 0.42);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 5;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 104px;
  transform: translate(-50%, 12px);
  padding: 0.7em 1.4em;
  font-family: var(--label-font);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  border-radius: 2px;
  box-shadow: 0 12px 40px -10px rgba(217, 180, 91, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 6;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 640px) {
  .eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; }
  .reveal-toggle__text { display: none; }        /* dot-only on phones */
  .reveal-toggle { padding: 0.6em; }
  .hint { font-size: 0.62rem; letter-spacing: 0.12em; }

  /* On phones the floating tag can't fit over a tiny building without clipping,
     so present it as a readable panel pinned to the bottom of the screen. */
  .card {
    position: fixed;
    left: 50% !important;
    right: auto;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    transform: translateX(-50%) !important;
    width: min(92vw, 360px);
    max-width: 92vw;
    padding: 1rem 1.15rem;
    z-index: 9;
  }
  .card__name { font-size: 1.1rem; letter-spacing: 0.12em; }
  .card__desc { font-size: 0.86rem; line-height: 1.55; }
  .card__cta { font-size: 0.66rem; margin-top: 0.8rem; }
  /* the panel is fixed to the viewport, so the hotspot must NOT create a
     transformed ancestor (that would re-anchor & clip the fixed card) */
  .hotspot:hover, .hotspot:focus-visible, .hotspot.is-active { transform: none; }
  /* keep the drift subtle now that the card is bottom-anchored */
  .card__inner { transform: translateY(8px); }
}

/* Fine-pointer devices: keep the pure-hover feel */
@media (hover: none) {
  .hint::after { content: ""; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hotspot,
  .card,
  .card__inner,
  .card__arrow,
  .toast { transition: opacity 0.2s ease; }
  .card__inner { transform: none; }
  .hotspot:hover,
  .hotspot:focus-visible,
  .hotspot.is-active { transform: none; }
  .stage.intro .hotspot::before,
  .stage.intro .hotspot::after { animation: none; }
  /* reveal outlines: show instantly (no entrance animation) rather than vanish */
  .stage.reveal .hotspot::after { animation: none; opacity: 1; transform: none; }
  .pc__glow { transform: translate(-50%, -50%) !important; transition: opacity 0.2s ease; }
  .pc__screen { animation: none !important; transition: opacity 0.2s ease; }
  .pc__screen::after { display: none; }
  .amb { animation: none !important; }
}

/* ============================================================
   SECTION 1 · First-visit welcome overlay
   Cinematic invitation that blurs (not hides) the plaza behind.
   ============================================================ */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 8vw 6vw;
  text-align: center;
  color: var(--cream);
  background:
    radial-gradient(130% 120% at 50% 34%,
      rgba(11, 13, 18, 0.5) 0%,
      rgba(11, 13, 18, 0.78) 62%,
      rgba(6, 7, 10, 0.9) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(108%) brightness(0.92);
  backdrop-filter: blur(16px) saturate(108%) brightness(0.92);
  /* hidden by default → no flash for returning visitors; JS opens it on first visit */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.15s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 1.15s linear,
    -webkit-backdrop-filter 1.15s ease,
    backdrop-filter 1.15s ease;
}
.welcome.is-open {
  opacity: 1;
  visibility: visible;
}
/* Cinematic exit: dissolve the blur away as the plaza takes over */
.welcome.is-closing {
  opacity: 0;
  visibility: hidden;
  -webkit-backdrop-filter: blur(0) saturate(100%) brightness(1);
  backdrop-filter: blur(0) saturate(100%) brightness(1);
  pointer-events: none;
}

.welcome__inner {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Art Deco monogram + hairline rule */
.welcome__mark {
  width: 42px;
  height: 42px;
  color: var(--gold);
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(217, 180, 91, 0.35));
}
.welcome__rule {
  width: 1px;
  height: 46px;
  margin: 1.1rem 0 1.6rem;
  background: linear-gradient(180deg, rgba(217, 180, 91, 0.7), rgba(217, 180, 91, 0));
}

.welcome__eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(240, 213, 146, 0.85);
}
.welcome__title {
  margin: 0;
  font-family: var(--label-font);
  font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-wrap: balance;
}
.welcome__lede {
  margin: 1.5rem 0 0;
  font-family: var(--label-font);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: rgba(239, 231, 214, 0.92);
  text-wrap: balance;
}
.welcome__sub {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-family: var(--ui-font);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: rgba(239, 231, 214, 0.62);
}

/* Luxurious gold Enter button */
.welcome__enter {
  position: relative;
  margin-top: 2.8rem;
  padding: 1em 3.4em;
  font-family: var(--ui-font);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #1b1509;
  background: linear-gradient(180deg, #f4dc9a 0%, #dcb85f 55%, #c69a41 100%);
  border: 1px solid rgba(244, 220, 154, 0.75);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 12px 44px -14px rgba(217, 180, 91, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s ease,
    letter-spacing 0.5s ease;
}
.welcome__enter span { position: relative; z-index: 1; }
/* slow, restrained sheen sweep on hover */
.welcome__enter::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s ease;
}
.welcome__enter:hover,
.welcome__enter:focus-visible {
  transform: translateY(-2px);
  letter-spacing: 0.5em;
  box-shadow:
    0 20px 60px -16px rgba(217, 180, 91, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  outline: none;
}
.welcome__enter:hover::after,
.welcome__enter:focus-visible::after { left: 120%; }
.welcome__enter:active { transform: translateY(0); }

/* Staggered cinematic entrance for the invitation content */
@media (prefers-reduced-motion: no-preference) {
  .welcome__inner > * {
    opacity: 0;
    transform: translateY(18px);
  }
  .welcome.is-open .welcome__inner > * {
    animation: welcomeRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .welcome.is-open .welcome__mark    { animation-delay: 0.15s; }
  .welcome.is-open .welcome__rule    { animation-delay: 0.3s; }
  .welcome.is-open .welcome__eyebrow { animation-delay: 0.45s; }
  .welcome.is-open .welcome__title   { animation-delay: 0.6s; }
  .welcome.is-open .welcome__lede    { animation-delay: 0.85s; }
  .welcome.is-open .welcome__sub     { animation-delay: 1.05s; }
  .welcome.is-open .welcome__enter   { animation-delay: 1.3s; }
}
@keyframes welcomeRise {
  to { opacity: 1; transform: none; }
}

/* Reduced motion: appear calmly, no travel */
@media (prefers-reduced-motion: reduce) {
  .welcome { transition: opacity 0.4s ease, visibility 0.4s linear; }
  .welcome__inner > * { opacity: 1; transform: none; }
  .welcome__enter { transition: box-shadow 0.3s ease; }
  .welcome__enter::after { display: none; }
}

@media (max-width: 640px) {
  .welcome__eyebrow { letter-spacing: 0.38em; }
  .welcome__enter { padding: 0.95em 2.8em; letter-spacing: 0.34em; }
}

/* Returning visitors: fully removed from layout + hit-testing */
.welcome[hidden] { display: none; }

/* ============================================================
   SECTION 5 · Elegant custom cursor
   Thin gold ring + precise dot. Only on fine-pointer devices;
   activated by JS (adds .cursor-on to <html>) so it safely
   falls back to the native cursor if scripting is off.
   ============================================================ */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--gold-lit);
  box-shadow: 0 0 8px rgba(240, 213, 146, 0.55);
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.cursor-ring {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(240, 213, 146, 0.7);
  background: rgba(240, 213, 146, 0);
  transition:
    opacity 0.35s ease,
    width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    background-color 0.3s ease;
}
/* over a destination or control: the ring opens, dot recedes */
.cursor-ring.is-hot {
  width: 52px;
  height: 52px;
  border-color: rgba(240, 213, 146, 0.9);
  background: rgba(240, 213, 146, 0.08);
}
.cursor-dot.is-hot {
  width: 0;
  height: 0;
  opacity: 0;
}
/* gentle press feedback */
.cursor-ring.is-down { width: 22px; height: 22px; }
.cursor-ring.is-hot.is-down { width: 44px; height: 44px; }

/* hide the native cursor only once the custom one is live */
html.cursor-on,
html.cursor-on * { cursor: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cursor-ring {
    transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease,
      border-color 0.2s ease, background-color 0.2s ease;
  }
}

/* ============================================================
   SECTION 7 · Living luxury environment
   Every layer is decorative, sits beneath the hotspots, and
   animates only transform / opacity / background-position for
   GPU-friendly motion. Long ease-in-out cycles (8–20s) with
   randomized negative delays keep movement desynchronized.
   Fully disabled under prefers-reduced-motion (see block below).
   ============================================================ */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.amb { position: absolute; }

/* full-scene layers fill the stage */
.amb-breathe, .amb-sun, .amb-clouds,
.amb-windows, .amb-windows2,
.amb-particles { inset: 0; width: 100%; height: 100%; }

/* foliage: drifting dappled light + soft leaf-shadow blended onto the
   canopies. No image pixels are moved — only light shifts across them. */
.amb-foliage {
  mix-blend-mode: soft-light;
  background-size: 150% 150%;
}

/* ---------- 1 · golden-hour breathing (≈2–3% warmth/brightness) ---------- */
.amb-breathe {
  background: radial-gradient(120% 100% at 60% 24%,
    rgba(255, 214, 150, 0.05) 0%, rgba(255, 196, 132, 0.02) 46%, transparent 70%);
  mix-blend-mode: soft-light;
  animation: ambBreathe 19s ease-in-out infinite alternate;
}
@keyframes ambBreathe { 0% { opacity: 0.35; } 100% { opacity: 1; } }

/* ---------- moving sunlight ---------- */
.amb-sun {
  background: radial-gradient(130% 90% at 62% 8%,
    rgba(255, 222, 165, 0.10) 0%, rgba(255, 205, 150, 0.03) 38%, transparent 62%);
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
  animation: ambSun 46s ease-in-out infinite alternate;
}
@keyframes ambSun {
  0%   { transform: translate3d(-2%, 0, 0); opacity: 0.7; }
  100% { transform: translate3d(3%, 0, 0);  opacity: 1; }
}

/* ---------- 4 · drifting clouds (almost imperceptible) ---------- */
.amb-clouds {
  background:
    radial-gradient(42% 44% at 18% 26%, rgba(255, 252, 246, 0.13), transparent 64%),
    radial-gradient(34% 38% at 52% 18%, rgba(255, 250, 242, 0.11), transparent 62%),
    radial-gradient(46% 48% at 80% 24%, rgba(255, 251, 244, 0.11), transparent 64%);
  filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 68%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 68%);
  will-change: transform;
  animation: ambClouds 90s ease-in-out infinite alternate;
}
@keyframes ambClouds {
  0%   { transform: translate3d(-9%, 0, 0); }
  100% { transform: translate3d(10%, 0, 0); }
}

/* ---------- 3 · foliage: extremely subtle dappled light (nothing sways) ---------- */
.amb-foliage-l {
  left: 0%; top: 16%; width: 26%; height: 46%;
  background:
    radial-gradient(22% 26% at 30% 28%, rgba(255, 240, 205, 0.14), transparent 60%),
    radial-gradient(18% 22% at 62% 52%, rgba(40, 34, 20, 0.12), transparent 60%),
    radial-gradient(16% 20% at 44% 74%, rgba(255, 236, 200, 0.1), transparent 60%);
  -webkit-mask-image: radial-gradient(80% 80% at 40% 45%, #000 45%, transparent 85%);
  mask-image: radial-gradient(80% 80% at 40% 45%, #000 45%, transparent 85%);
  animation: dapple 15s ease-in-out infinite alternate;
}
.amb-foliage-c {
  left: 24%; top: 30%; width: 20%; height: 32%;
  background:
    radial-gradient(24% 28% at 40% 34%, rgba(255, 240, 205, 0.13), transparent 60%),
    radial-gradient(20% 24% at 64% 58%, rgba(40, 34, 20, 0.11), transparent 60%);
  -webkit-mask-image: radial-gradient(72% 76% at 42% 45%, #000 44%, transparent 84%);
  mask-image: radial-gradient(72% 76% at 42% 45%, #000 44%, transparent 84%);
  animation: dapple 12s ease-in-out -4s infinite alternate;
}
.amb-foliage-r {
  left: 80%; top: 2%; width: 20%; height: 32%;
  background:
    radial-gradient(22% 26% at 45% 30%, rgba(255, 240, 205, 0.13), transparent 60%),
    radial-gradient(18% 22% at 66% 55%, rgba(40, 34, 20, 0.1), transparent 60%);
  -webkit-mask-image: radial-gradient(76% 78% at 55% 40%, #000 44%, transparent 84%);
  mask-image: radial-gradient(76% 78% at 55% 40%, #000 44%, transparent 84%);
  animation: dapple 17s ease-in-out -8s infinite alternate;
}
@keyframes dapple {
  0%   { background-position: 0% 0%;   opacity: 0.55; }
  100% { background-position: 24% 18%; opacity: 1; }
}

/* ---------- 5 · architectural window warmth (few-percent shimmer) ---------- */
.amb-windows {
  background:
    radial-gradient(7% 11% at 9% 47%,  rgba(255, 188, 120, 0.5),  transparent 70%),
    radial-gradient(6% 8%  at 27% 34%, rgba(255, 196, 128, 0.45), transparent 70%),
    radial-gradient(7% 10% at 72% 44%, rgba(255, 200, 135, 0.5),  transparent 70%),
    radial-gradient(6% 8%  at 90% 38%, rgba(255, 196, 130, 0.45), transparent 70%);
  mix-blend-mode: screen;
  animation: ambWin 11s ease-in-out infinite alternate;
}
.amb-windows2 {
  background:
    radial-gradient(8% 12% at 90% 57%, rgba(255, 183, 118, 0.45), transparent 70%),
    radial-gradient(5% 8%  at 16% 40%, rgba(255, 190, 122, 0.4),  transparent 70%);
  mix-blend-mode: screen;
  animation: ambWin2 15s ease-in-out -6s infinite alternate;
}
/* narrow opacity range = gentle shimmer, never obvious flicker */
@keyframes ambWin  { 0% { opacity: 0.45; } 100% { opacity: 0.85; } }
@keyframes ambWin2 { 0% { opacity: 0.7;  } 100% { opacity: 0.35; } }

/* ---------- 2 · fountain: flow, ripples, shimmer, moving highlights ---------- */
.amb-water {
  left: 47%; top: 62%; width: 30%; height: 11%;
  background:
    radial-gradient(30% 52% at 26% 44%, rgba(255, 255, 255, 0.24), transparent 60%),
    radial-gradient(26% 48% at 58% 56%, rgba(198, 240, 240, 0.22), transparent 60%),
    radial-gradient(22% 44% at 82% 42%, rgba(255, 255, 255, 0.18), transparent 60%);
  background-size: 180% 180%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(72% 92% at 50% 50%, #000 55%, transparent 90%);
  mask-image: radial-gradient(72% 92% at 50% 50%, #000 55%, transparent 90%);
  animation: ambWater 9s ease-in-out infinite alternate;
}
@keyframes ambWater {
  0%   { background-position: 0% 100%; }
  100% { background-position: 100% 0%; }
}
@keyframes ambWater { 0% { background-position: 0 0, 0 0; } 100% { background-position: 66% 0, 0 0; } }

.amb-ripple {
  left: 49%; top: 63%; width: 26%; height: 9%;
  background:
    radial-gradient(40% 60% at 40% 50%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(34% 52% at 66% 52%, rgba(190, 235, 235, 0.12), transparent 62%);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(75% 90% at 50% 50%, #000 50%, transparent 90%);
  mask-image: radial-gradient(75% 90% at 50% 50%, #000 50%, transparent 90%);
  will-change: transform, opacity;
  animation: ambRipple 8s ease-in-out infinite alternate;
}
@keyframes ambRipple {
  0%   { transform: scale(1);     opacity: 0.45; }
  100% { transform: scale(1.07);  opacity: 0.95; }
}

.amb-waterfall {
  left: 52%; top: 58%; width: 18%; height: 9%;
  background: radial-gradient(50% 70% at 50% 40%, rgba(255, 255, 255, 0.12), transparent 68%);
  filter: blur(2px);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  animation: ambFall 4.5s ease-in-out infinite alternate;
}
@keyframes ambFall {
  0%   { opacity: 0.4; transform: translateY(0); }
  100% { opacity: 0.85; transform: translateY(3%); }
}

/* ---------- 6 · computer pavilion idle (waiting workstation) ---------- */
.amb-pc-glow {
  left: 44%; top: 34%; width: 17%; height: 20%;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(255, 214, 158, 0.45), rgba(255, 190, 130, 0.18) 46%, transparent 74%);
  mix-blend-mode: screen;
  filter: blur(3px);
  animation: pcIdle 7s ease-in-out infinite;
}
.amb-pc-screen {
  left: 46%; top: 37%; width: 13%; height: 13%;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(255, 250, 238, 0.16), rgba(220, 232, 250, 0.08) 55%, transparent 82%);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 68%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 68%, transparent 96%);
  animation: pcIdle 7s ease-in-out infinite;
}
@keyframes pcIdle { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* faint reflection sweeping across the monitor */
.amb-pc-reflect {
  left: 46%; top: 37%; width: 13%; height: 13%;
  border-radius: 6px;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 70%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 70%, transparent 96%);
}
.amb-pc-reflect::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  will-change: transform;
  animation: pcReflect 13s ease-in-out infinite;
}
@keyframes pcReflect {
  0%, 100% { transform: translateX(-60%); }
  50%      { transform: translateX(60%); }
}

/* ---------- 7 · Atelier Café ---------- */
.amb-cafe-glow {
  left: 80%; top: 46%; width: 20%; height: 22%;
  background: radial-gradient(60% 60% at 55% 45%,
    rgba(255, 186, 120, 0.55), transparent 72%);
  mix-blend-mode: screen;
  animation: ambWin 13s ease-in-out -4s infinite alternate;
}
.amb-cafe-reflect {
  left: 86%; top: 44%; width: 13%; height: 20%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 50%, transparent 80%);
  mask-image: linear-gradient(120deg, transparent 20%, #000 50%, transparent 80%);
}
.amb-cafe-reflect::before {
  content: "";
  position: absolute;
  inset: -30% -50%;
  background: linear-gradient(110deg,
    transparent 25%, rgba(255, 240, 210, 0.07) 50%, transparent 75%);
  will-change: transform;
  animation: cafeReflect 17s ease-in-out -3s infinite;
}
@keyframes cafeReflect { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(50%); } }

/* soft steam rising from the café cups */
.amb-steam {
  width: 2.8%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(50% 60% at 50% 80%, rgba(255, 255, 255, 0.3), transparent 72%);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
}
.amb-steam1 { left: 86%;   top: 60%; animation: steam 9s ease-in-out -1s infinite; }
.amb-steam2 { left: 89%;   top: 61%; animation: steam 11s ease-in-out -5s infinite; }
.amb-steam3 { left: 92%;   top: 60.5%; animation: steam 10s ease-in-out -8s infinite; }
@keyframes steam {
  0%   { transform: translateY(0) scaleX(1);   opacity: 0; }
  20%  { opacity: 0.65; }
  70%  { opacity: 0.35; }
  100% { transform: translateY(-90%) scaleX(1.7); opacity: 0; }
}

/* ---------- 9 · slow reflections on glass + polished stone ---------- */
.amb-glass-reflect {
  left: 65%; top: 30%; width: 15%; height: 28%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(120deg, transparent 25%, #000 50%, transparent 75%);
  mask-image: linear-gradient(120deg, transparent 25%, #000 50%, transparent 75%);
}
.amb-glass-reflect::before {
  content: "";
  position: absolute;
  inset: -20% -50%;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255, 246, 224, 0.06) 50%, transparent 70%);
  will-change: transform;
  animation: cafeReflect 20s ease-in-out -10s infinite;
}
.amb-floor-sheen {
  left: 20%; top: 78%; width: 60%; height: 20%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 236, 205, 0.06), transparent 70%);
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
  animation: ambSun 40s ease-in-out -8s infinite alternate;
}

/* ---------- 8 · ambient particles (elements created in script.js) ---------- */
.amb-particles { overflow: hidden; }
.particle {
  position: absolute;
  top: 0; left: 0;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 220, 0.95), rgba(255, 236, 200, 0) 70%);
  box-shadow: 0 0 6px rgba(255, 240, 210, 0.5);
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUp var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes floatUp {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: var(--peak, 0.5); }
  85%  { opacity: var(--peak, 0.5); }
  100% { transform: translate3d(var(--dx, 12px), var(--dy, -70px), 0); opacity: 0; }
}

/* ============================================================
   Reduced motion: freeze the entire decorative environment,
   keep everything functional.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .amb,
  .amb *,
  .particle { animation: none !important; }
  .amb-steam,
  .particle { opacity: 0 !important; }   /* hide motion-dependent wisps/motes */
}

/* ============================================================
   SECTION 8 · Accessibility & Responsiveness
   Hotspots stay aligned automatically (the stage is locked to the
   image's aspect ratio and every hotspot is positioned in %), so
   the work here is chrome scaling, keyboard/SR support, and
   graceful fallbacks. Reduced-motion is handled in its own block.
   ============================================================ */

/* screen-reader only (visually hidden, still announced) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1200px) {
  .card { width: clamp(200px, 23vw, 250px); }
}

/* ---------- Tablet ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .eyebrow { letter-spacing: 0.34em; }
  .card { width: min(42vw, 244px); }
  .card__name { font-size: 1.22rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  .card { width: min(94vw, 340px); padding: 0.9rem 1rem; }
  .card__name { font-size: 1.02rem; letter-spacing: 0.1em; }
  .card__desc { font-size: 0.82rem; line-height: 1.5; }
  .card__cta { font-size: 0.62rem; letter-spacing: 0.18em; }
  .welcome__enter { padding: 0.9em 2.4em; letter-spacing: 0.3em; }
}

/* ---------- Short / landscape phones: reclaim vertical space ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .welcome { padding: 4vh 6vw; }
  .welcome__mark { width: 32px; height: 32px; }
  .welcome__rule { height: 26px; margin: 0.6rem 0 0.9rem; }
  .welcome__sub { display: none; }
  .eyebrow { top: 8px; }
  .reveal-toggle { top: 8px; }
  .hint { bottom: 8px; }
}

/* ---------- Fallback when backdrop-filter is unsupported ---------- */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card { background: linear-gradient(158deg, rgba(20, 24, 32, 0.92), rgba(10, 12, 18, 0.88)); }
  .reveal-toggle { background: rgba(14, 17, 24, 0.9); }
  .welcome { background: rgba(9, 11, 16, 0.93); }
  .hint { background: rgba(11, 13, 18, 0.82); }
}

/* ---------- Users who prefer less transparency ---------- */
@media (prefers-reduced-transparency: reduce) {
  .card {
    background: rgba(16, 20, 28, 0.95);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .reveal-toggle {
    background: rgba(14, 17, 24, 0.94);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .welcome { background: rgba(9, 11, 16, 0.94); }
  .hint { background: rgba(11, 13, 18, 0.85); }
}

/* ---------- Higher-contrast preference: firmer edges & focus ---------- */
@media (prefers-contrast: more) {
  .card { border-color: rgba(240, 213, 146, 0.65); }
  .reveal-toggle { border-color: rgba(240, 213, 146, 0.7); }
  .hotspot:focus-visible::after {
    border-color: rgba(245, 224, 165, 1);
    box-shadow: 0 0 0 2px rgba(240, 213, 146, 0.55);
  }
}

/* ============================================================
   SECTION 10 · Branding, contact dock, utilities & CTA
   A finishing chrome layer in the corners + centered brand/CTA.
   Decorative pieces are pointer-events:none; only the small
   controls are interactive, so hotspots stay fully clickable.
   ============================================================ */

/* ---------- Personal branding (top-center) ---------- */
.brand {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);   /* ~48px lower for breathing room */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  animation: brandIn 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

/* crest: Art Deco flourishes flanking a BR emblem */
.brand__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin-bottom: 0.35rem;
}
.brand__wing {
  position: relative;
  width: clamp(38px, 8vw, 92px);
  height: 8px;
}
.brand__wing::before {   /* the line */
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.brand__wing--l::before { left: 0; right: 7px; background: linear-gradient(90deg, transparent, rgba(217, 180, 91, 0.85)); }
.brand__wing--r::before { right: 0; left: 7px; background: linear-gradient(270deg, transparent, rgba(217, 180, 91, 0.85)); }
.brand__wing::after {    /* diamond at the inner end */
  content: "";
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 6px rgba(240, 213, 146, 0.5);
}
.brand__wing--l::after { right: 0; }
.brand__wing--r::after { left: 0; }

.brand__emblem {
  position: relative;
  width: clamp(42px, 8vw, 58px);
  height: clamp(42px, 8vw, 58px);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 12px rgba(240, 213, 146, 0.3));
}
.brand__hex { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand__hex path { fill: none; stroke: rgba(240, 213, 146, 0.85); stroke-width: 1; }
.brand__hex path:last-child { stroke: rgba(217, 180, 91, 0.55); }
.brand__br {
  font-family: var(--label-font);
  font-weight: 600;
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  letter-spacing: 0.04em;
  color: var(--gold-lit);
  text-shadow: 0 0 10px rgba(240, 213, 146, 0.4);
}

/* name: refined metallic-gold gradient serif */
.brand__name {
  margin: 0;
  font-family: var(--label-font);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  letter-spacing: clamp(0.18em, 0.52vw, 0.34em);
  line-height: 1.08;
  color: var(--gold-lit); /* fallback if background-clip unsupported */
  background: linear-gradient(180deg, #f8ecca 0%, #e7cb84 42%, #c9a24d 72%, #f3e3b3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(240, 213, 146, 0.22));
}

/* divider: hairline with a centered diamond */
.brand__divider {
  position: relative;
  display: block;
  width: clamp(130px, 28vw, 280px);
  height: 10px;
  margin: 0.5rem auto 0.5rem;
}
.brand__divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(217, 180, 91, 0.7) 22%, rgba(217, 180, 91, 0.7) 78%, transparent);
}
.brand__divider::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(240, 213, 146, 0.55);
}
.brand__title {
  margin: 0;
  font-family: var(--ui-font);
  font-weight: 300;
  font-size: clamp(0.6rem, 1.4vw, 0.82rem);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-lit);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
@keyframes brandIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Discovery cue (top-left) ---------- */
.cue {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 1em;
  border: 1px solid rgba(240, 213, 146, 0.28);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(30, 34, 44, 0.42), rgba(14, 17, 24, 0.32));
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  animation: cueIn 1.2s ease 0.4s both;
}
@keyframes cueIn { from { opacity: 0; } to { opacity: 1; } }
.cue__text {
  font-family: var(--ui-font);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-lit);
  white-space: nowrap;
}
.cue__gem {
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(240, 213, 146, 0.5);
}

/* ---------- Shared control chrome (utility + dock) ---------- */
.util, .dock { z-index: 6; pointer-events: none; }         /* only buttons are interactive */
.util {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  display: flex;
  gap: 0.5rem;
}
.dock {
  position: fixed;
  left: 16px;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.util__btn, .dock__btn {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--gold);                     /* gold line-icons at rest */
  background: linear-gradient(150deg, rgba(28, 32, 42, 0.52), rgba(12, 15, 22, 0.42));
  border: 1px solid rgba(240, 213, 146, 0.38);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 8px 26px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
/* dock icons sit in refined rounded-squares (top-right stays circular) */
.dock__btn { border-radius: 13px; }
.util__btn svg, .dock__btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.util__btn svg .dot { fill: currentColor; stroke: none; }
/* brand-mark icons (LinkedIn/GitHub) are fill-based */
.dock__btn svg:not([stroke]) { fill: currentColor; stroke: none; }

/* gold hover glow + lift */
.util__btn:hover, .util__btn:focus-visible,
.dock__btn:hover, .dock__btn:focus-visible {
  transform: translateY(-2px) scale(1.07);
  color: var(--gold-lit);
  border-color: rgba(240, 213, 146, 0.7);
  box-shadow:
    0 12px 34px -12px rgba(217, 180, 91, 0.5),
    0 0 18px rgba(240, 213, 146, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  outline: none;
}
/* toggled-on state */
.util__btn[aria-pressed="true"] {
  color: var(--gold-lit);
  border-color: rgba(240, 213, 146, 0.55);
  background: linear-gradient(150deg, rgba(74, 60, 30, 0.5), rgba(28, 24, 15, 0.44));
}

/* tooltips */
.util__btn::after, .dock__btn::after {
  content: attr(data-tip);
  position: absolute;
  font-family: var(--ui-font);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-lit);
  background: rgba(11, 13, 18, 0.82);
  border: 1px solid rgba(240, 213, 146, 0.28);
  border-radius: 3px;
  padding: 0.35em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.util__btn::after { top: calc(100% + 9px); right: 0; transform: translateY(-3px); }
.dock__btn::after { left: calc(100% + 10px); top: 50%; transform: translate(-3px, -50%); }
.util__btn:hover::after, .util__btn:focus-visible::after { opacity: 1; transform: translateY(0); }
.dock__btn:hover::after, .dock__btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* ---------- Navigation menu ---------- */
.menu {
  position: fixed;
  top: 66px; right: 16px;
  z-index: 7;
  min-width: 224px;
  padding: 1rem 0.6rem;
  background: linear-gradient(158deg, rgba(26, 30, 40, 0.64), rgba(12, 15, 22, 0.52));
  border: 1px solid rgba(240, 213, 146, 0.24);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(18px) saturate(122%);
  backdrop-filter: blur(18px) saturate(122%);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; transform: translateY(0) scale(1); }
.menu__eyebrow {
  margin: 0 0 0.5rem;
  padding: 0 0.8rem;
  font-family: var(--ui-font);
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(240, 213, 146, 0.7);
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-family: var(--label-font);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}
.menu__item:hover, .menu__item:focus-visible {
  background: rgba(240, 213, 146, 0.08);
  color: var(--gold-lit);
  padding-left: 1.1rem;
  outline: none;
}

/* ---------- Call to action (bottom-center) ---------- */
.cta {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  max-width: 92vw;
  text-align: center;
  pointer-events: none;
  animation: ctaIn 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
}
/* gold ornament above the CTA */
.cta__deco {
  position: relative;
  display: block;
  width: clamp(150px, 30vw, 300px);
  height: 10px;
  margin: 0 auto 0.6rem;
}
.cta__deco::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(217, 180, 91, 0.65) 24%, rgba(217, 180, 91, 0.65) 76%, transparent);
}
.cta__deco::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(240, 213, 146, 0.5);
}
.cta__lead {
  margin: 0;
  font-family: var(--label-font);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lit);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 0 22px rgba(240, 213, 146, 0.16);
}
.cta__sub {
  margin: 0.55rem 0 0;
  font-family: var(--italic-font);      /* genuine italic accent */
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.8vw, 1.22rem);
  letter-spacing: 0.02em;
  color: #f4ead2;                       /* warm champagne ivory */
  /* tight edge shadow + soft dark halo lifts it off the light stone */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62), 0 0 16px rgba(0, 0, 0, 0.4);
}
@keyframes ctaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .brand { top: 56px; }                 /* sit below the control row */
  .brand__crest { gap: 0.5rem; margin-bottom: 0.2rem; }
  .brand__wing { width: clamp(26px, 12vw, 44px); }
  .util { top: 10px; right: 10px; gap: 0.4rem; }
  .util__btn, .dock__btn { width: 38px; height: 38px; }
  .util__btn svg, .dock__btn svg { width: 17px; height: 17px; }
  .dock { left: 10px; gap: 0.45rem; }
  .dock__btn { border-radius: 11px; }
  .menu { top: 56px; right: 10px; min-width: 200px; }
  .cue { top: 12px; left: 10px; padding: 0.4em 0.7em; }
  .cue__text { font-size: 0.54rem; letter-spacing: 0.2em; }
  .cta { bottom: 12px; }
  .cta__deco { margin-bottom: 0.4rem; }
}
/* very small screens: drop the cue so the top row stays clean */
@media (max-width: 460px) {
  .cue { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand, .cta, .cue { animation: none !important; opacity: 1 !important; }
  .util__btn, .dock__btn { transition: color 0.2s ease, border-color 0.2s ease; }
  .util__btn:hover, .util__btn:focus-visible,
  .dock__btn:hover, .dock__btn:focus-visible { transform: none; }
  .menu { transition: opacity 0.2s ease; }
}