/* ============================================================
   D_ART CINEMATIC LAYER — clean, fast, no custom cursor
   ============================================================ */

/* ---------- Backdrop layers ---------- */
.particle-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  mix-blend-mode: screen;
  opacity: .9;
}

.aurora-mesh {
  position: fixed; inset: -15%;
  z-index: -1; pointer-events: none;
  filter: blur(80px);
  opacity: .45;
  will-change: transform;
}
.mesh-blob { position: absolute; border-radius: 50%; will-change: transform; }
.mesh-a { width: 44vw; height: 44vw; top: 5%; left: 5%; background: radial-gradient(circle, rgba(200,145,43,.5), transparent 65%); animation: blob-a 24s ease-in-out infinite; }
.mesh-b { width: 40vw; height: 40vw; top: 40%; right: 0; background: radial-gradient(circle, rgba(145,62,53,.45), transparent 65%); animation: blob-b 30s ease-in-out infinite; }
.mesh-c { width: 36vw; height: 36vw; bottom: 0; left: 25%; background: radial-gradient(circle, rgba(243,199,108,.4), transparent 65%); animation: blob-c 26s ease-in-out infinite; }
.mesh-d { width: 30vw; height: 30vw; top: 15%; right: 25%; background: radial-gradient(circle, rgba(36,70,66,.5), transparent 65%); animation: blob-d 32s ease-in-out infinite; }
@keyframes blob-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.12); } }
@keyframes blob-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6%, 8%) scale(1.08); } }
@keyframes blob-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%, -8%) scale(1.15); } }
@keyframes blob-d { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8%, -4%) scale(1.08); } }
body[data-theme="dark"] .aurora-mesh { opacity: .3; }

/* Static grain — no animation, no cost */
.page-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  background-size: 160px 160px;
}

.page-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(9,20,19,.28) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: rgba(255,255,255,.04);
}
.scroll-progress > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--rust));
  box-shadow: 0 0 10px rgba(243,199,108,.7);
  transition: width .1s linear;
}

/* ---------- Enter flash ---------- */
.enter-flash {
  position: fixed; inset: 0; z-index: 9996; pointer-events: none;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255,245,220,1) 0%, rgba(243,199,108,.85) 18%, rgba(200,145,43,.3) 40%, transparent 70%);
  opacity: 0; transform: scale(.2);
}
.enter-flash.is-active { animation: enter-portal 1.1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes enter-portal {
  0% { opacity: 0; transform: scale(.2); }
  15% { opacity: 1; transform: scale(.5); }
  55% { opacity: .9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(3.5); }
}

/* ============================================================
   WELCOME — fixed overlay, scrollable internally,
   sticky Enter bar so the button is ALWAYS reachable.
   ============================================================ */
.welcome-screen {
  position: fixed !important;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 28px clamp(22px, 5vw, 72px) 0;
  transition: opacity .9s cubic-bezier(.76,0,.24,1), transform 1s cubic-bezier(.76,0,.24,1), filter 1s ease;
  will-change: transform, opacity, filter;
}
.welcome-screen.is-closing { pointer-events: none; }

body.welcome-open { overflow: hidden !important; }

/* Content block grows; sticky bottom bar clamps to bottom */
.welcome-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 20px 0 30px;
  min-height: 0;
}

.welcome-topline { position: relative; z-index: 1; }
.welcome-bottomline {
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * clamp(22px, 5vw, 72px));
  padding: 14px clamp(22px, 5vw, 72px) 20px;
  background: linear-gradient(to top, var(--cream) 60%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  z-index: 5;
}

/* ---------- Welcome background ---------- */
.welcome-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.welcome-aurora { position: absolute; inset: -20%; filter: blur(70px); opacity: .55; }
.welcome-aurora span { position: absolute; border-radius: 50%; }
.welcome-aurora span:nth-child(1) { width: 50vw; height: 50vw; top: 0; left: 0; background: radial-gradient(circle, rgba(243,199,108,.5), transparent 65%); animation: blob-a 22s ease-in-out infinite; }
.welcome-aurora span:nth-child(2) { width: 44vw; height: 44vw; bottom: 0; right: 0; background: radial-gradient(circle, rgba(145,62,53,.45), transparent 65%); animation: blob-b 28s ease-in-out infinite; }
.welcome-aurora span:nth-child(3) { width: 40vw; height: 40vw; top: 30%; left: 40%; background: radial-gradient(circle, rgba(36,70,66,.5), transparent 65%); animation: blob-c 26s ease-in-out infinite; }

.welcome-grid {
  position: absolute; inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(23,36,34,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(23,36,34,.13) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 70%);
}
.welcome-grain {
  position: absolute; inset: 0;
  opacity: .04; 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.welcome-flare {
  position: absolute; inset: -20% -40%;
  mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.5) 49%, rgba(243,199,108,.45) 52%, transparent 60%);
  transform: translateX(-140%) rotate(7deg);
  opacity: 0;
  animation: flare-sweep 2.4s 1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes flare-sweep {
  0% { transform: translateX(-140%) rotate(7deg); opacity: 0; }
  10% { opacity: .95; }
  45% { opacity: .5; }
  100% { transform: translateX(140%) rotate(7deg); opacity: 0; }
}

.welcome-sparks { position: absolute; inset: 0; pointer-events: none; }
.welcome-sparks i {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,199,108,1), rgba(243,199,108,0));
  box-shadow: 0 0 8px rgba(243,199,108,.9);
  animation: spark-rise var(--dur, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  bottom: -20px;
  opacity: 0;
}
@keyframes spark-rise {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: .9; }
  100% { transform: translateY(-115vh) scale(1.1); opacity: 0; }
}

/* ---------- Mascot (sized relative to viewport) ---------- */
.welcome-mascot-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
  will-change: transform;
}
.welcome-mascot-wrap {
  position: relative;
  display: grid; place-items: center;
  width: min(230px, 34vh, 55vw);
  aspect-ratio: .78;
  margin: 0 auto;
  transform-style: preserve-3d;
}
.welcome-mascot {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 22px;
  -webkit-mask-image: radial-gradient(ellipse 64% 88% at center, #000 58%, transparent 94%);
  mask-image: radial-gradient(ellipse 64% 88% at center, #000 58%, transparent 94%);
  mix-blend-mode: multiply;
  filter: saturate(.9) contrast(1.06);
  animation: mascot-bob 5s ease-in-out infinite;
}
@keyframes mascot-bob {
  0%,100% { transform: translateY(0) rotateZ(0); }
  50% { transform: translateY(-8px) rotateZ(1deg); }
}
.welcome-halo {
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,199,108,.5), transparent 65%);
  filter: blur(22px);
  z-index: -1;
  animation: halo-pulse 4s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.12); opacity: 1; }
}
.welcome-mascot-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 48%, rgba(243,199,108,.55) 53%, transparent 68%);
  transform: translateX(-130%) skewX(-14deg);
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: 50%;
  animation: mascot-shine 5.5s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 64% 88% at center, #000 58%, transparent 94%);
  -webkit-mask-image: radial-gradient(ellipse 64% 88% at center, #000 58%, transparent 94%);
}
@keyframes mascot-shine {
  0%, 55% { transform: translateX(-130%) skewX(-14deg); }
  75% { transform: translateX(130%) skewX(-14deg); }
  100% { transform: translateX(130%) skewX(-14deg); }
}

.welcome-ring {
  position: absolute;
  border: 1px solid rgba(200,145,43,.7);
  border-radius: 50%;
  width: 112%; height: 62%;
  transform: rotate(-28deg);
  animation: ring-drift 9s ease-in-out infinite;
}
.ring-right { width: 78%; height: 116%; border-color: rgba(145,62,53,.75); transform: rotate(34deg); animation-delay: -1.5s; }
@keyframes ring-drift { 0%,100% { margin-left: 0; } 50% { margin-left: 14px; } }

/* ---------- Wordmark ---------- */
.welcome-wordmark {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  margin-top: -6px;
}
.welcome-wordmark .wm-word { display: inline-flex; overflow: hidden; }
.welcome-wordmark .wm-word i {
  display: inline-block;
  font-style: normal;
  transform: translateY(120%);
  opacity: 0;
  animation: letter-rise .85s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(.05s * var(--i));
}
.welcome-wordmark em.wm-word i { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--gold); }
@keyframes letter-rise {
  0% { transform: translateY(120%); opacity: 0; }
  60% { transform: translateY(-6%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.welcome-kicker { color: var(--gold); font: 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 22px; }
.welcome-line { margin: 16px 0 0; color: #65716b; font: 12px var(--mono); }

/* ---------- Enter button ---------- */
.welcome-enter-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.enter-pulse {
  position: absolute; inset: -10px;
  border-radius: 999px;
  border: 1px solid rgba(243,199,108,.5);
  pointer-events: none;
  animation: enter-ring 2.2s ease-out infinite;
}
.enter-pulse::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 999px;
  border: 1px solid rgba(243,199,108,.35);
  animation: enter-ring 2.2s ease-out .7s infinite;
}
@keyframes enter-ring {
  0% { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.welcome-enter { position: relative; z-index: 1; letter-spacing: .14em; }

/* ---------- Kinetic scramble ---------- */
[data-kinetic] .k-char { display: inline-block; will-change: transform, opacity; }

/* ---------- Scroll-velocity chromatic aberration ---------- */
body.is-scrolling-fast h1,
body.is-scrolling-fast h2,
body.is-scrolling-fast .manifesto-line {
  text-shadow: -2px 0 0 rgba(180,60,60,.5), 2px 0 0 rgba(70,130,200,.4), 0 0 30px rgba(243,199,108,.25);
}

/* ---------- Mobile trims ---------- */
@media (max-width: 800px) {
  .aurora-mesh { filter: blur(60px); opacity: .3; }
  .particle-canvas { opacity: .6; }
  .welcome-mascot-wrap { width: min(190px, 30vh, 58vw); }
}
@media (max-width: 600px) {
  .welcome-bottomline { padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-mesh, .mesh-blob, .welcome-aurora span, .welcome-sparks i,
  .welcome-halo, .welcome-mascot, .welcome-mascot-shine, .welcome-ring,
  .welcome-flare, .enter-pulse { animation: none !important; }
  .particle-canvas { display: none !important; }
}