/* ── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:   #f5f0e8;
  --dark:    #1a1714;
  --muted:   #4a4540;
  --accent1: #c8a97e;   /* warm gold  */
  --accent2: #7eb8c8;   /* ice blue   */
  --accent3: #c87eaa;   /* blush pink */
  --penguin: #2a2d3e;   /* deep navy  */
  --koala:   #9e9e8a;   /* eucalyptus grey */
}

html { scroll-behavior: smooth; }

body {
  font-family: 'General Sans', sans-serif;
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
}

/* ── NOISE TEXTURE OVERLAY ────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b0b8a8; border-radius: 3px; }

/* ══════════════════════════════════════════════════════
    HERO SECTION
══════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Gradient blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  animation: blobFloat 8s ease-in-out infinite alternate;
}
.blob-1 {
  width: 500px; height: 500px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, #d4bfa0, transparent);
}
.blob-2 {
  width: 400px; height: 400px;
  top: 30%; right: -60px;
  background: radial-gradient(circle, #a0c4d4, transparent);
  animation-delay: 2s;
}
.blob-3 {
  width: 300px; height: 300px;
  bottom: 80px; left: 30%;
  background: radial-gradient(circle, #d4a0c4, transparent);
  animation-delay: 4s;
}
@keyframes blobFloat {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px, 30px) scale(1.05); }
}

/* ── CLOCKS ROW ──────────────────────────────────────── */
.clocks-row {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 2rem;
  padding: 2.5rem 3rem 0;
  align-items: flex-start;
}
.clock-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.clock-face {
  width: 82px;
  height: 82px;
  position: relative;
}
.clock-face svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.1));
}
.clock-circle {
  fill: rgba(255,255,255,0.88);
  stroke: var(--dark);
  stroke-width: 1.5;
}
.clock-dot { fill: var(--dark); }
.hand-hour {
  stroke: var(--dark);
  stroke-width: 3.5;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.hand-minute {
  stroke: var(--dark);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.hand-second {
  stroke: var(--accent1);
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transition: transform 0.2s linear;
}
.clock-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
}
.clock-time-text {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  color: var(--accent1);
  letter-spacing: 0.05em;
}

/* ── MAIN HERO CONTENT ───────────────────────────────── */
.hero-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 3rem 3rem;
}
.hero-name-wrap {
  margin-bottom: 0;
  padding-bottom: 2.5em;
}
.hero-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(5rem, 16vw, 12rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--dark);
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
  animation: nameReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.hero-name em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px var(--dark);
}
@keyframes nameReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(12px); }
}

.hero-pronounce {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.55s forwards;
}
.hero-pronounce span {
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: 2px 8px;
}
.hero-desc {
  max-width: 480px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.8s forwards;
}
.hero-desc strong { color: var(--dark); font-weight: 500; }
.hero-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 1s forwards;
}
.hero-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  text-transform: lowercase;
  transition: all 0.3s;
  cursor: default;
}
.hero-tag:nth-child(1) { color: var(--penguin); }
.hero-tag:nth-child(2) { color: #506b5a; }
.hero-tag:nth-child(3) { color: #3a6640; }
.hero-tag:hover {
  background: var(--dark);
  color: var(--cream) !important;
  border-color: var(--dark);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════
    ABOUT SECTION
══════════════════════════════════════════════════════ */
#about {
  padding: 7rem 3rem 8rem;
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

.about-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dark);
  margin-bottom: 2.75rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.about-heading .dot { color: var(--accent1); }

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 4rem;
  align-items: stretch; /* Make right column stretch to left column's height */
}

/* ── LEFT column (Widgets) ─────────────────────────── */
.about-left {
  display: flex;
  flex-direction: column;
}
.widget-stack {
  display: flex; 
  flex-direction: column; 
  gap: 1rem;
  height: 100%;
}

/* ── BORDER GLOW CARD (React Bits Port) ──────── */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 14px; /* Matches widget-card */
  --glow-padding: 40px;
  --cone-spread: 25;
  --card-bg: #36312d; /* User requested lighter dark */
  
  /* Fallbacks for JS injected vars */
  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 60%);
  --glow-color-50: hsl(40deg 80% 80% / 50%);
  --glow-color-40: hsl(40deg 80% 80% / 40%);
  --glow-color-30: hsl(40deg 80% 80% / 30%);
  --glow-color-20: hsl(40deg 80% 80% / 20%);
  --glow-color-10: hsl(40deg 80% 80% / 10%);

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

/* Base card (sits inside border-glow) */
.widget-card {
  position: relative;
  z-index: 2;
  width: 100%;
  background: transparent; /* Glow card handles bg */
  border-radius: var(--border-radius);
  cursor: default;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .border-glow-card:not(:hover):not(.sweep-active)::before,
  .border-glow-card:not(:hover):not(.sweep-active)::after,
  .border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
  }
}
@media (hover: none) {
  /* On touch devices, disable glow effects completely to optimize for mobile */
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light {
    display: none !important;
  }
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%)
  );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image: conic-gradient(
    from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden; /* Prevent iframe from breaking corners */
  z-index: 1;
  border-radius: inherit;
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card header row */
.widget-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem;
}
.widget-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 9px;
  background: rgba(245,240,232,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}

.widget-body    { flex: 1; min-width: 0; }
.widget-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(245,240,232,0.5); margin-bottom: 0.2rem;
}
.widget-title {
  font-size: 0.95rem; font-weight: 600; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-sub {
  font-size: 0.78rem; color: rgba(245,240,232,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Spotify embed wrapper */
.spotify-wrap { padding: 0 1.25rem 1.25rem; }
.spotify-wrap iframe { display: block; border-radius: 10px; }
.music-header { padding: 1.25rem 1.25rem 0.75rem; }

/* Watch card thumbnail */
.watch-thumb {
  width: 100%; height: 140px;
  object-fit: cover; object-position: center; display: block;
}

/* Tea card detail bar */
.tea-detail {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 1.25rem 1.25rem calc(1.25rem + 42px + 0.85rem);
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: rgba(245,240,232,0.65);
  letter-spacing: 0.05em;
}
.tea-line {
  display: flex; align-items: center; gap: 0.6rem;
}
.tea-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent1); flex-shrink: 0; }


/* ── RIGHT column (Bio Blocks) ──────────────────────── */
.about-right {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Stretches bio cards to perfectly match left column height */
}

.about-block {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.about-banner {
  background: var(--dark);
  color: var(--cream);
  padding: 1.1rem 1.6rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about-body {
  border: 2px solid rgba(26,23,20,0.18);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1.5rem 1.6rem 1.7rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--muted);
  background: #fff;
}
.about-body strong { color: var(--dark); font-weight: 600; }

/* ══════════════════════════════════════════════════════
    FOOTER
══════════════════════════════════════════════════════ */
footer {
  background: var(--dark);
  color: rgba(245,240,232,0.45);
  padding: 2.25rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.footer-left  { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-name  { font-family: 'Playfair Display', serif; font-size: 1rem;
                font-weight: 700; color: var(--cream); letter-spacing: 0; }
.footer-right { display: flex; gap: 1.5rem; align-items: center; }

/* ══════════════════════════════════════════════════════
    RESPONSIVE (MOBILE OPTIMIZATION)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero */
  .hero-name { font-size: clamp(4rem, 18vw, 6rem); }
  .clocks-row  { padding: 2rem 1.5rem 0; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
  .clock-face  { width: 60px; height: 60px; }
  .hero-main   { padding: 1rem 1.5rem 2.5rem; }
  .hero-blob { width: 300px; height: 300px; }
  
  /* About Layout */
  #about       { padding: 5rem 1.5rem 6rem; }
  .about-inner { 
    grid-template-columns: 1fr; /* Stack columns */
    gap: 2rem; 
  }
  .about-right {
    gap: 1.5rem; /* When stacked, they need explicit gap since space-between doesn't have a fixed height anymore */
  }
  
  /* Footer */
  footer { flex-direction: column; gap: 1rem; text-align: center; }
}


/* ── LOADING SCREEN STYLES ── */


    

    #loader {
      position: fixed;
      inset: 0;
      background: #f5f0e8;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.9s ease;
    }
    #loader.done {
      opacity: 0;
      pointer-events: none;
    }

    #hello-stage {
      width: min(38vw, 260px);
      height: min(10vw, 70px);
      position: relative;
    }

    .hello-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.94);
      transition: opacity 0.08s ease, transform 0.08s ease;
    }
    .hello-slide.active {
      opacity: 1;
      transform: scale(1);
    }
    /* Final English: short smooth fade-in, then stroke draw runs on a fully visible element */
    .hello-slide.final {
      transition: opacity 0.2s ease;
    }

    .hello-slide svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
/* Pause animations while loading */
body.is-loading .hero-name,
body.is-loading .hero-pronounce,
body.is-loading .hero-desc,
body.is-loading .hero-tags {
  animation-play-state: paused !important;
  opacity: 0;
}