:root {
  --green: #2e4a3b;
  --gold: #c9a24b;
  --stone: #8a8274;
  --cream: #f6efe0;
  --ink: #1f2a22;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--green);
  color: var(--cream);
  font-family: "Inter", system-ui, sans-serif;
}
body.menu-open { overflow: hidden; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
}
.topbar a { color: var(--cream); text-decoration: none; }
.brand { font-family: "Fraunces", serif; font-size: 1.4rem; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.resume-link, .email-link { font-size: 0.95rem; font-weight: 500; }
.email-icon { display: none; width: 22px; height: 22px; }

.menu-btn {
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  display: grid; place-content: center; gap: 6px;
}
.menu-btn span {
  display: block; width: 26px; height: 2px;
  background: var(--cream);
  transition: transform 0.5s var(--ease), opacity 0.3s;
}
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Side menu ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(10, 22, 16, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0s 0.6s;
}
.scrim.open {
  opacity: 1; visibility: visible;
  transition: opacity 0.6s var(--ease);
}

.menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9;
  width: min(86vw, 380px);
  padding: 84px 36px 28px 60px;
  display: flex; flex-direction: column;
  background: radial-gradient(circle at 100% 0%, #3d5c4a, #243b2e 62%);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform 0.8s var(--ease), visibility 0s 0.8s;
}
.menu.open {
  transform: none; visibility: visible;
  transition: transform 0.8s var(--ease);
}
/* thin gold frame inside the panel */
.menu::before {
  content: ""; position: absolute; inset: 14px 14px 14px 42px;
  border: 1px solid rgba(201, 162, 75, 0.4);
  pointer-events: none;
}
/* carved gold border on the left edge */
.edge { position: absolute; left: 0; top: 0; width: 26px; height: 100%; }

.emblem { width: 48px; height: auto; margin: 0 0 10px; }
.menu-label {
  margin: 0 0 8px;
  color: var(--gold); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li {
  opacity: 0; transform: translateX(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.menu.open li {
  opacity: 1; transform: none;
  transition-delay: calc(0.35s + var(--i) * 0.09s);
}
.menu a {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 0.5rem 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, 0.2);
}
.menu .no {
  width: 1.5rem; flex: none;
  font-family: "Inter", sans-serif; font-size: 0.68rem;
  letter-spacing: 0.1em; color: var(--gold);
}
.menu .lbl { transition: transform 0.5s var(--ease); }
.menu a:hover .lbl, .menu a:focus-visible .lbl { transform: translateX(8px); }
/* gold line that draws on hover */
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
/* small diamond that appears on hover */
.menu a::before {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -3px;
  border: 1px solid var(--gold); background: var(--gold);
  transform: rotate(45deg) scale(0);
  transition: transform 0.5s var(--ease);
}
.menu a:hover::before, .menu a:focus-visible::before { transform: rotate(45deg) scale(1); }

/* Contact: small heading, then small links underneath */
.menu-label-sub { margin-top: 22px; }
.menu .menu-contact a {
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  padding: 0.4rem 0;
  border-bottom: 0;
}
.menu .menu-contact a::before { display: none; }

.menu-foot {
  margin: auto 0 0;
  font-family: "Fraunces", serif; font-style: italic;
  font-size: 0.98rem; color: var(--gold);
}

/* ---------- Story (scroll scenes) ---------- */
.story { position: relative; height: 300vh; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--green);
}
.scene {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
}

/* Scene 1 */
.s1 { background: radial-gradient(circle at 50% 45%, #3d5c4a, #1f3328 75%); }

/* Scene 2: lotus art on forest green */
.s2 { background: #152a1f; }
.art {
  position: absolute; display: block;
  left: -4%; top: -4%; width: 108%; height: 108%;
  will-change: transform;
}
/* Darkens only the top, so the logo, Resume link and menu icon stay readable */
.s2::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(14, 28, 20, 0.85), rgba(14, 28, 20, 0) 18%);
}

/* Text (scene 1) */
.copy {
  position: relative; z-index: 3;
  width: min(90%, 620px);
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.eyebrow {
  margin: 0 0 0.8rem; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.copy h1 { margin: 0; font-family: "Fraunces", serif; font-weight: 600; line-height: 1.1; font-size: clamp(2.6rem, 9vw, 5rem); }
.sub { margin: 1rem auto 0; max-width: 34ch; font-size: 1.05rem; line-height: 1.5; }

/* ---------- Namaste intro ---------- */
.hands {
  --h: clamp(220px, 44vh, 400px);
  position: absolute; z-index: 4; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: flex; pointer-events: none;
}
.hand { animation-duration: 3.7s; animation-fill-mode: both; animation-timing-function: var(--ease); }
.hand img { display: block; height: var(--h); width: auto; }
.hand.l { animation-name: handL; }
.hand.r { animation-name: handR; }

@keyframes handL {
  0%   { transform: translateX(-55vw); opacity: 0; }
  38%  { transform: translateX(0); opacity: 1; }
  52%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-45vw); opacity: 0; }
}
@keyframes handR {
  0%   { transform: translateX(55vw); opacity: 0; }
  38%  { transform: translateX(0); opacity: 1; }
  52%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(45vw); opacity: 0; }
}

.halo {
  position: absolute; z-index: 3; left: 50%; top: 46%;
  width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 190, 95, 0.55), rgba(232, 190, 95, 0) 65%);
  animation: halo 3.7s var(--ease) both;
}
@keyframes halo {
  0%   { opacity: 0; transform: scale(0.6); }
  38%  { opacity: 0.55; transform: scale(0.8); }
  52%  { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(2.4); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.reveal { opacity: 0; animation: rise 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }

.scroll-hint {
  position: absolute; z-index: 3; bottom: 28px; left: 50%;
  transform: translateX(-50%); text-align: center;
}
.scroll-hint span {
  display: block; opacity: 0;
  color: var(--cream); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  animation: fadein 1s var(--ease) 3.2s forwards;
}
.scroll-hint::after {
  content: ""; display: block; width: 1px; height: 36px; margin: 8px auto 0;
  background: var(--gold); animation: drip 2.4s var(--ease) infinite;
}
@keyframes fadein { to { opacity: 1; } }
@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Skip the intro (class is set by script.js) */
.intro-skip .hands, .intro-skip .halo { display: none; }
.intro-skip .reveal { opacity: 1; animation: none; }
.intro-skip .scroll-hint span { opacity: 1; animation: none; }

/* ---------- Sculpture + "View my work" text ---------- */
.point {
  --fh: clamp(190px, 33vh, 300px);
  position: absolute; z-index: 3;
  right: 6vw; bottom: 5vh;
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--cream); text-decoration: none;
  will-change: transform;
}
/* Soft dark glow behind the sculpture and text, so the text is always easy to read (not a box) */
.point::before {
  content: ""; position: absolute; z-index: -1;
  inset: -18% -22% -10% -30%;
  background: radial-gradient(closest-side, rgba(14, 28, 20, 0.9), rgba(14, 28, 20, 0));
  pointer-events: none;
}
.point svg {
  display: block; flex: none; overflow: visible;
  height: var(--fh); width: calc(var(--fh) * 150 / 270);
}
.go {
  position: relative;
  margin-top: calc(var(--fh) * 0.37 - 0.55em);
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1; white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(8, 18, 12, 0.95);
}
.go::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px;
  height: 2px; background: var(--gold);
  transform: scaleX(0.3); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.point:hover .go::after, .point:focus-visible .go::after { transform: scaleX(1); }

.point .arm { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ---------- Quote panel in the middle of the circle (lotus scene) ---------- */
.quote {
  position: absolute; z-index: 3;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: clamp(300px, 38vw, 540px); margin: 0;
  padding: 64px 36px 50px;
  text-align: center; pointer-events: none;
  font-family: "Fraunces", serif; font-style: italic;
  background: rgba(246, 239, 224, 0.96);
  border: 2px solid #c9a24b; border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(246, 239, 224, 0.12), 0 0 0 7px rgba(201, 162, 75, 0.6), 0 22px 50px rgba(0, 0, 0, 0.4);
}
/* thin inner line */
.quote::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(138, 106, 34, 0.45); border-radius: 3px; }
.quote::after { content: none; }
.quote blockquote { position: relative; margin: 0; }

/* both lines: ONE font size, ONE weight, ONE colour */
.quote blockquote,
.quote blockquote p,
.quote .q1,
.quote .q2 {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1.45;
  color: #1f3328 !important;
}
.quote blockquote p { margin: 0; text-wrap: balance; }
.quote .q2 { margin-top: 0.5em; }

/* lotus badge on the top edge, gently floating */
.orn-top { position: absolute; top: -34px; left: 50%; width: 68px; height: 68px; margin-left: -34px; animation: qfloat 4s ease-in-out infinite; }
@keyframes qfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* gems on the four corners */
.gem { position: absolute; width: 12px; height: 12px; background: #c9a24b; border: 2px solid #f6efe0; transform: rotate(45deg); }
.gem.g1 { top: -7px; left: -7px; } .gem.g2 { top: -7px; right: -7px; }
.gem.g3 { bottom: -7px; left: -7px; } .gem.g4 { bottom: -7px; right: -7px; }

/* sparkles around the panel */
.spk { position: absolute; width: 20px; height: 20px; animation: qtwinkle 2.8s ease-in-out infinite; }
.spk.k1 { top: -26px; left: 14%; }
.spk.k2 { top: 22%; right: -36px; width: 26px; height: 26px; animation-delay: -1s; }
.spk.k3 { bottom: -28px; right: 18%; animation-delay: -2s; }
.spk.k4 { bottom: 24%; left: -34px; width: 16px; height: 16px; animation-delay: -1.6s; }
@keyframes qtwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }

@media (max-width: 700px) {
  /* on phones the word Email becomes a small envelope, so the bar stays tidy */
  .email-text { display: none; }
  .email-icon { display: block; }
  .topbar-right { gap: 14px; }
  .point { --fh: clamp(150px, 24vh, 210px); right: 5vw; bottom: 4vh; }
  .go { font-size: 1.45rem; }
  .menu { padding-left: 52px; padding-right: 28px; }
  /* on phones the quote panel is wider, with slightly smaller words */
  .quote { width: 84vw; padding: 56px 28px 40px; }
  .quote blockquote, .quote blockquote p, .quote .q1, .quote .q2 { font-size: 1rem !important; }
  .spk.k2, .spk.k4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hands, .halo { display: none; }
  .reveal { opacity: 1; animation: none; }
  .scroll-hint span { opacity: 1; animation: none; }
  .scroll-hint::after { animation: none; }
  .point .arm { animation: none; }
  .menu, .menu li, .scrim { transition: none; }
  .orn-top, .spk { animation: none; }
}

/* Short screens (phone held sideways): let the menu scroll */
@media (max-height: 560px) {
  .menu { padding-top: 64px; overflow-y: auto; }
  .emblem { display: none; }
  .menu-label-sub { margin-top: 12px; }
}

/* Landscape phones: stop the home page scenes from crowding */
@media (max-height: 480px) and (orientation: landscape) {
  .hands { --h: 58vh; }
  .point { --fh: 110px; }
  .quote { padding: 44px 24px 26px; }
  .sub { display: none; }
}