/* =========================================================
   Noah Licata — landing page
   A digital front door, not a portfolio: one screen, one
   identity, five doors out. Kintsugi is the centerpiece —
   a fractured emblem that seals itself in gold once, then
   lives quietly behind everything else.
   ========================================================= */

/* =========================================================
   Noah Licata — landing page (CHROME/CIRCUIT variant)
   A reskin in brushed-chrome and neon: an isometric chrome
   cube and a live circuit board replace the kintsugi motif,
   lit in magenta and cyan against near-black steel.
   ========================================================= */

:root {
  --black: #000000;
  --ink-900: #07080a;
  --ink-800: #101317;
  --white: #f2f5f8;
  --grey: #8b93a0;
  --grey-dim: #565d68;

  /* "gold" role -> chrome/cyan (JS-driven morph target lives here too) */
  --gold: #3ce1ff;
  --gold-rgb: 60, 225, 255;
  --gold-light: #b6f4ff;
  --gold-light-rgb: 182, 244, 255;
  --gold-deep: #0f6e85;
  /* "red" role -> neon magenta */
  --red: #ff2fd6;
  --red-rgb: 255, 47, 214;
  --red-light: #ff8ff2;
  --red-light-rgb: 255, 143, 242;
  --red-deep: #8a1470;

  /* chrome metal ramp for the hardware pieces */
  --chrome-hi: #f4f6f9;
  --chrome-mid: #9aa2b0;
  --chrome-low: #454b56;
  --chrome-dark: #1b1e24;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  font-family: var(--sans);
  background: radial-gradient(140% 110% at 50% 20%, #10121a 0%, var(--black) 62%);
  color: var(--white);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* =========================================================
   GRAIN + ORBS — cinematic atmosphere
   ========================================================= */
.grain {
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spotlight {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(var(--gold-rgb), 0.10), transparent 42%);
  mix-blend-mode: soft-light;
  transition: opacity 0.4s ease;
}
.bg-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.orb {
  position: fixed; filter: blur(90px); pointer-events: none;
  opacity: 0.4; z-index: 0;
}
.orb--gold {
  width: 560px; height: 560px; top: -180px; left: -160px;
  background: radial-gradient(circle, rgba(var(--gold-rgb),0.35), transparent 70%);
  animation: orbFloatA 22s ease-in-out infinite;
}
.orb--red {
  width: 460px; height: 460px; bottom: -180px; right: -140px;
  background: radial-gradient(circle, rgba(var(--red-rgb),0.32), transparent 70%);
  animation: orbFloatB 27s ease-in-out infinite;
}
@keyframes orbFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
  33% { transform: translate(50px, 30px) scale(1.1); border-radius: 42% 58% 63% 37% / 48% 42% 58% 52%; }
  66% { transform: translate(20px, 60px) scale(0.96); border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
}
@keyframes orbFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
  33% { transform: translate(-46px, -30px) scale(1.06); border-radius: 40% 60% 55% 45% / 60% 45% 55% 40%; }
  66% { transform: translate(-10px, -60px) scale(0.94); border-radius: 60% 40% 45% 55% / 40% 55% 45% 60%; }
}

/* =========================================================
   CORNER ART — gold moon + marble vein pieces, spread across
   the page so the composition isn't all pinned to the center.
   ========================================================= */
.deco {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
.deco svg { display: block; width: 100%; height: auto; overflow: visible; }

.deco--moon {
  top: -70px;
  right: -70px;
  width: min(38vw, 400px);
  opacity: 0;
  animation: decoFadeIn 1.4s var(--ease-out) forwards, moonDrift 16s ease-in-out infinite 1.4s;
  animation-delay: 0.3s, 1.7s;
}
.deco-moon__breathe {
  transform-box: fill-box;
  transform-origin: center;
  animation: moonBreathe 7s ease-in-out infinite;
}
.deco-moon__rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: moonRotor 12s ease-in-out infinite;
}
.deco-moon__stripes {
  animation: stripeShimmer 4.5s ease-in-out infinite, stripeShift 9s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.deco-moon__dot {
  animation: crackPulse 3.5s ease-in-out infinite;
}

.deco--marble {
  bottom: -90px;
  left: -80px;
  width: min(40vw, 420px);
  opacity: 0;
  animation: decoFadeIn 1.4s var(--ease-out) forwards, marbleDrift 14s ease-in-out infinite 1.6s;
  animation-delay: 0.5s, 1.9s;
}
.marble-slab {
  opacity: 0.92;
  transform-box: fill-box;
  transform-origin: center;
  animation: slabBreathe 8s ease-in-out infinite;
}
.marble-shade { opacity: 0.72; }
.marble-vein { opacity: 0.95; }
.marble-vein--glow {
  opacity: 0.75;
  animation: veinGlow 3.6s ease-in-out infinite;
}
.marble-vein--thin { opacity: 0.6; }
.marble-spark { filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.9)); }
.marble-spark--small { filter: drop-shadow(0 0 4px rgba(var(--red-rgb), 0.8)); }

.deco--accent {
  top: 10%;
  left: 5%;
  width: min(9vw, 96px);
  opacity: 0;
  animation: decoFadeIn 1.2s var(--ease-out) forwards, accentFloat 9s ease-in-out infinite;
  animation-delay: 0.8s, 2.1s;
}
.deco--accent svg { animation: accentSpin 26s linear infinite; animation-delay: 1s; transform-origin: center; }
.deco--accent2 {
  top: 42%;
  left: -3%;
  width: min(7vw, 78px);
  opacity: 0;
  animation: decoFadeIn 1.2s var(--ease-out) forwards, accentFloat 11s ease-in-out infinite 0.4s;
  animation-delay: 1s, 2.3s;
}
.deco--accent2 svg { animation: accentSpinReverse 22s linear infinite; animation-delay: 1.2s; transform-origin: center; }
.deco--accent3 {
  bottom: 8%;
  right: 4%;
  width: min(10vw, 120px);
  opacity: 0;
  animation: decoFadeIn 1.2s var(--ease-out) forwards, accentFloat 13s ease-in-out infinite 0.8s;
  animation-delay: 1.2s, 2.5s;
}
.deco--accent3 svg { animation: accentSpin 34s linear infinite; animation-delay: 1.4s; transform-origin: center; }

@keyframes decoFadeIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes moonDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-26px, 22px); }
}
@keyframes moonBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes moonRotor {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes stripeShimmer {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
@keyframes stripeShift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes marbleDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -20px) scale(1.03); }
}
@keyframes slabBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.025) rotate(0.8deg); }
}
@keyframes veinGlow {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
@keyframes accentSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes accentSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes accentFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -18px); }
}

@media (max-width: 780px) {
  .deco--moon { width: min(48vw, 300px); top: -50px; right: -60px; }
  .deco--marble { width: min(50vw, 320px); bottom: -60px; left: -60px; }
  .deco--accent2 { display: none; }
}
@media (max-width: 560px) {
  .deco--accent { display: none; }
  .deco--accent3 { display: none; }
  .deco--moon { width: 52vw; }
  .deco--marble { width: 54vw; }
}

/* =========================================================
   THEME LAYERS — gold/kintsugi vs chrome/circuit corner art.
   JS drives opacity directly (synced with the color morph),
   this transition is just a safety net for non-JS states.
   ========================================================= */
.theme-layer {
  transition: opacity 1.5s ease;
}
.theme-layer--gold { opacity: 1; }
.theme-layer--chrome { opacity: 0; }

/* =========================================================
   GLITCH OVERLAY — brief scanline burst at the morph's
   midpoint, sells the "transmission" between the two themes.
   ========================================================= */
.glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(
    0deg,
    rgba(var(--gold-rgb), 0.5) 0px,
    rgba(var(--red-rgb), 0.4) 2px,
    transparent 4px,
    transparent 9px
  );
}
.glitch-overlay.is-active {
  animation: glitchPulse 1.6s ease-in-out;
}
@keyframes glitchPulse {
  0%   { opacity: 0; transform: translateX(0); }
  38%  { opacity: 0; transform: translateX(0); }
  44%  { opacity: 0.55; transform: translateX(-8px); }
  48%  { opacity: 0.25; transform: translateX(6px); }
  52%  { opacity: 0.5; transform: translateX(-4px); }
  57%  { opacity: 0.2; transform: translateX(3px); }
  63%  { opacity: 0; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
.kintsugi-wrap.is-morphing {
  animation: kintsugiMorphPulse 1.6s ease-in-out;
}
@keyframes kintsugiMorphPulse {
  0%, 40%, 100% { filter: none; }
  48% { filter: brightness(1.35) saturate(1.3); }
  52% { filter: brightness(0.9) saturate(1.1); }
  58% { filter: brightness(1.2) saturate(1.25); }
}

/* =========================================================
   STAGE
   ========================================================= */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vh, 30px) 24px;
}

/* =========================================================
   KINTSUGI EMBLEM
   ========================================================= */
.kintsugi-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: min(62vw, 540px);
  height: min(62vw, 540px);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.5;
  transition: transform 0.4s var(--ease-out), opacity 1.2s var(--ease-out);
  will-change: transform;
}
.kintsugi { width: 100%; height: 100%; overflow: visible; }

.kfragment {
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.15s var(--ease-out), opacity 0.9s var(--ease-out);
}
.kfragment.is-breathing {
  animation: fragBreathe var(--breathe-dur, 5s) ease-in-out infinite;
  animation-delay: var(--breathe-delay, 0s);
}
@keyframes fragBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
.kcrack {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.5));
  transition: stroke-dashoffset 1s var(--ease-out);
}
.kcrack.is-red { filter: drop-shadow(0 0 5px rgba(var(--red-rgb), 0.5)); }
.kcrack.is-glow { animation: crackPulse 5s ease-in-out infinite; }
@keyframes crackPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.75)); }
}
#glowCircle { transition: opacity 1.4s var(--ease-out); }
.comet { opacity: 0; }
.comet.is-active { opacity: 1; }

/* =========================================================
   HERO CONTENT
   ========================================================= */
.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
}
.hero__panel {
  position: relative;
  padding: clamp(16px, 2.5vh, 34px) clamp(18px, 5vw, 48px) clamp(18px, 2.5vh, 30px);
  border-radius: 18px;
  background: rgba(7, 9, 12, 0.58);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(140, 220, 255, 0.16);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 50px rgba(var(--gold-rgb), 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.hero__panel::after {
  content: "";
  position: absolute;
  left: -20%; right: -20%; height: 45%;
  top: -60%;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.08), transparent 70%);
  animation: panelScan 7s linear infinite;
  pointer-events: none;
}
@keyframes panelScan {
  0% { top: -60%; }
  100% { top: 110%; }
}
.hud-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(var(--gold-rgb), 0.55);
  opacity: 0.85;
  pointer-events: none;
}
.hud-corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-corner--tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-color: rgba(var(--red-rgb), 0.55); }
.hud-corner--bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-color: rgba(var(--red-rgb), 0.55); }
.hud-corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.hero__name {
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw + 3vh, 3.9rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 45%, var(--red-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.55));
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero__tagline {
  margin-top: clamp(6px, 1.5vh, 16px);
  font-size: clamp(0.92rem, 1vw + 1vh, 1.22rem);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.hero__bio {
  margin-top: clamp(6px, 1vh, 12px);
  font-size: clamp(0.85rem, 0.6vw + 0.9vh, 0.98rem);
  color: #a9a9ae;
  line-height: 1.42;
  max-width: 460px;
  margin-inline: auto;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.hero__name.is-in, .hero__tagline.is-in, .hero__bio.is-in {
  opacity: 1; transform: none;
}

/* =========================================================
   WORD FIELD — particles that assemble into rotating words
   ========================================================= */
.wordfield {
  display: block;
  width: 100%;
  max-width: 640px;
  height: clamp(56px, 6vw + 7vh, 108px);
  margin: clamp(2px, 1vh, 8px) auto 0;
}

/* =========================================================
   LINK TILES
   ========================================================= */
.links {
  margin-top: clamp(12px, 1.5vw + 1.5vh, 26px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
}
.link-tile {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: clamp(8px, 1vh, 11px) 17px clamp(8px, 1vh, 11px) 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out),
    background 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
  animation: tilePulse var(--pulse-dur, 6s) ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}
@keyframes tilePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--gold-rgb), 0); }
  50% { box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.14); }
}
.link-tile.is-in { opacity: 1; transform: none; }
.link-tile:hover {
  background: rgba(var(--gold-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: translateY(-2px);
}
.link-tile--primary { border-color: rgba(var(--red-rgb), 0.45); }
.link-tile--primary:hover {
  background: rgba(var(--red-rgb), 0.16);
  border-color: rgba(var(--red-rgb), 0.65);
}
.link-tile__icon {
  display: inline-flex;
  width: 18px; height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}
.link-tile--primary .link-tile__icon { color: var(--red-light); }
.link-tile__icon svg { width: 100%; height: 100%; }
.link-tile__text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}
.link-tile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  position: absolute;
  left: 0; right: 0; bottom: clamp(6px, 1.5vh, 16px);
  z-index: 2;
  text-align: center;
  font-size: 0.74rem;
  color: var(--grey-dim);
  letter-spacing: 0.01em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 560px) {
  .links { gap: 7px; }
  .link-tile { padding: 8px 14px 8px 11px; }
  .orb { display: none; }
}
@media (max-height: 720px) {
  .hero__bio { display: none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .kfragment, .kcrack, #glowCircle,
  .hero__name, .hero__tagline, .hero__bio, .link-tile {
    transition: none !important;
  }
  .kcrack.is-glow, .kfragment.is-breathing, .link-tile, .orb {
    animation: none !important;
  }
  .comet { display: none !important; }
  .marble-spark, .marble-spark--small { display: none !important; }
  .wordfield { display: none !important; }
  .spotlight { display: none !important; }
  .kintsugi-wrap { transition: none !important; }
  .bg-particles { display: none !important; }
  .deco, .deco-moon__breathe, .deco-moon__rotor, .deco-moon__stripes, .deco-moon__dot,
  .marble-slab, .marble-vein--glow, .marble-spark, .marble-spark--small,
  .deco--accent svg, .deco--accent2 svg, .deco--accent3 svg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__panel::after { display: none !important; }
  .theme-layer { transition: none !important; }
  .glitch-overlay { display: none !important; }
  .kintsugi-wrap.is-morphing { animation: none !important; }
}