/* ============================================================
   ART-O-LIV — Main CSS Entry Point
   ============================================================ */

/* CSS @import statements MUST come at the top of the file */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;700;1,300;1,400;1,500;1,600;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Kalam:wght@300;400;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300;1,9..40,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

@import 'tokens.css?v=10';
@import 'reset.css?v=10';
@import 'base.css?v=10';
@import 'components/loader.css?v=45';
@import 'components/icon-mark.css?v=45';
@import 'components/cursor.css?v=45';
@import 'components/hero.css?v=45';
@import 'components/sections.css';
@import 'components/journal.css';
@import 'components/portfolio.css';

/* ============================================================
   LOGO CONTAINER STYLES FOR HERO SECTION
   ============================================================ */
.logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;
  opacity: 0.95;
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-container__logo {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
}

.logo-container:hover .logo-container__logo {
  transform: scale(1.1);
}

.logo-container__heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 0.5rem;
  color: #2c2925;
  line-height: 1.2;
}

.logo-container__tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a554c;
  max-width: 400px;
}

.logo-container:hover {
  opacity: 1;
}

@keyframes logoFloat {

  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
}

/* ============================================================
   SITE LOGO — fixed top-right, home / back-to-top button
   ============================================================ */
/*
  logo.svg viewBox is 612\u00d7792. Logo content lives at roughly:
    x: 80\u201325  (koi left \u2192 last letter right)
    y: 330\u2013455 (top of arrows \u2192 bottom of tagline)

  object-view-box: inset(top% right% bottom% left%) crops into
  the image at percentage coordinates, then stretches the crop
  to fill the element's display box. No overflow tricks needed.
    top:    330/792 = 41.7% \u2192 42%
    bottom: (792\u2013455)/792 = 42.6% \u2192 43%
    left:   80/612  = 13.1% \u2192 13%
    right:  (612\u2013527)/612 = 13.9% \u2192 14%
  Cropped display ratio: (612\u00d70.73) / (792\u00d70.15) \u2248 445/119 = 3.74
  At width 190px: height = 190 / 3.74 \u2248 51px
*/
.site-logo {
  position: fixed;
  top: 0;
  left: 200px;
  z-index: 1001;
  /* above the nav pill (z-index 1000) */
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.22s ease, transform 0.22s ease;

  /* ── Subtle glassmorphism (half-strength vs. nav bar) ── */
  padding: 10px 18px;
  border-radius: 16px;
  overflow: hidden;

  /* translucent grey tint — less opaque than nav */
  background: rgba(210, 210, 218, 0.16);
  backdrop-filter: blur(12px) saturate(120%) brightness(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.02);

  /* softer glass edge */
  border: 1px solid rgba(255, 255, 255, 0.35);

  /* gentler lift — reduced shadow vs. nav */
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.07),
    0 1px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

.site-logo:hover {
  opacity: 0.72;
  transform: translateY(-2px);
}

/* Site logo SVG — viewBox does the crop; just set display dimensions */
.site-logo__svg {
  display: block;
  /* viewBox ratio: 450 / 135 = 3.33 : 1
     380 × 0.75 = 285px wide → height = 285 / 3.33 ≈ 86px */
  width: 285px;
  height: 86px;
}

/* Shrink on narrow viewports */
@media (max-width: 640px) {
  .site-logo {
    top: 4px;
    left: 8px;
  }

  .site-logo__svg {
    width: 220px;
    height: 66px;
  }
}

/* ============================================================
   NAV — TRANSPARENT GLASSMORPHISM PILL  (static, always visible)
   ============================================================ */

/* Outer wrapper: hidden until hero-ready */
.nav-main {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease 0.4s;
}

body.hero-ready .nav-main {
  opacity: 1;
  pointer-events: all;
}

/* ─── Transparent glass pill ─────────────────────────────── */
.nav-main__bar {
  position: relative;
  /* anchor pseudo-elements */
  overflow: hidden;
  /* clip shimmer + orb to pill shape */
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 24px;
  border-radius: 60px;
  white-space: nowrap;

  /* TRANSLUCENT GREY GLASSMORPHISM — distinct on white/light backgrounds */
  background: rgba(190, 190, 200, 0.28);
  backdrop-filter: blur(22px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(140%) brightness(1.04);

  /* More visible glass edge */
  border: 1px solid rgba(255, 255, 255, 0.62);

  /* Stronger lift + inner sheen */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* ─── Shining wave blobs (organic, non-uniform shimmer) ──────────────── */
/*
  Two independent radial-gradient blobs, each on a different
  multi-step path at a different speed. Because 9s and 6.5s share
  no simple ratio, they re-sync only after ~117s — within any
  normal viewing window the motion looks completely random.

  Both elements are blurred and clipped by the pill’s overflow:hidden.
  The Y oscillation (+/- small %) gives a wave-like undulation.
*/

/* — Blob 1: large, warm-white + teal hint — */
.nav-main__bar::before {
  content: '';
  position: absolute;
  /* slightly oversized so blur edges don’t clip harshly */
  top: -40%;
  left: -10%;
  width: 50%;
  height: 180%;
  border-radius: 50%;

  background: radial-gradient(ellipse 100% 60% at 50% 50%,
      rgba(255, 255, 255, 0.60) 0%,
      rgba(1, 149, 160, 0.18) 38%,
      transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: blob-1 9s ease-in-out infinite alternate;
}

@keyframes blob-1 {
  0% {
    transform: translate(0%, 0%) scale(1.00);
    opacity: 0.55;
  }

  14% {
    transform: translate(60%, -18%) scale(1.20);
    opacity: 0.75;
  }

  28% {
    transform: translate(140%, 10%) scale(0.90);
    opacity: 0.50;
  }

  42% {
    transform: translate(90%, -25%) scale(1.10);
    opacity: 0.80;
  }

  57% {
    transform: translate(200%, 15%) scale(0.85);
    opacity: 0.45;
  }

  71% {
    transform: translate(150%, -12%) scale(1.15);
    opacity: 0.70;
  }

  85% {
    transform: translate(220%, 20%) scale(0.95);
    opacity: 0.55;
  }

  100% {
    transform: translate(170%, -8%) scale(1.05);
    opacity: 0.65;
  }
}

/* — Blob 2: smaller, concentrated bright highlight — */
.nav-main__bar::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  width: 30%;
  height: 160%;
  border-radius: 50%;

  background: radial-gradient(ellipse 100% 55% at 50% 50%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(237, 30, 127, 0.08) 40%,
      transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
  animation: blob-2 6.5s ease-in-out infinite alternate;
  animation-delay: -2.8s;
  /* phase-offset so it starts mid-cycle */
}

@keyframes blob-2 {
  0% {
    transform: translate(0%, 10%) scale(1.00);
    opacity: 0.50;
  }

  20% {
    transform: translate(-120%, -20%) scale(1.30);
    opacity: 0.75;
  }

  40% {
    transform: translate(80%, 18%) scale(0.80);
    opacity: 0.40;
  }

  60% {
    transform: translate(-60%, -15%) scale(1.20);
    opacity: 0.70;
  }

  80% {
    transform: translate(50%, 22%) scale(0.90);
    opacity: 0.45;
  }

  100% {
    transform: translate(-90%, -8%) scale(1.10);
    opacity: 0.60;
  }
}

/* ─── Nav links ─────────────────────────────────────────────── */
.nav-main__link {
  position: relative;
  /* sit above z-index:0 shimmer blobs */
  z-index: 1;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 17, 13, 0.50);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 30px;
  transition:
    color 0.20s ease,
    background 0.20s ease;
}

.nav-main__link:hover {
  color: #111;
  background: rgba(1, 149, 160, 0.09);
}

/* Active link — teal accent, set by IntersectionObserver */
.nav-main__link.is-active {
  color: #0195A0;
  background: rgba(1, 149, 160, 0.10);
  font-weight: 700;
}

/* ─── Dot separators ────────────────────────────────────────── */
.nav-main__sep {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(20, 17, 13, 0.14);
  flex-shrink: 0;
  align-self: center;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-main {
    top: 14px;
  }

  .nav-main__bar {
    padding: 7px 14px;
    border-radius: 50px;
    overflow-x: auto;
    border-radius: 40px;
  }

  .nav-main__link {
    font-size: 0.6rem;
    padding: 5px 10px;
  }

  .nav-main__sep {
    width: 2px;
    height: 2px;
  }
}