/* ====================================================================
   Sacrifice font + intro animation styles
   ----------------------------------------------------------------
   HOW TO EDIT
   • Font file path .................. line 14 (url())
   • Background color of intro ....... --intro-bg
   • Ink color of drawn letters ...... --intro-ink
   • Glow color / amount ............. --intro-glow / drop-shadow rules
   • Final text size (Sacrifice) ..... .intro__final font-size
   • Total intro duration ............ controlled in script.js (TIMING)
   ==================================================================== */

@font-face {
  font-family: "Sacrifice";
  /* ← change the path here if you move the font file */
  src: url("fonts/SacrificeDemo-8Ox1B.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  --intro-bg: #0b0a09;
  --intro-bg-2: #161412;
  --intro-ink: #f4ede0;
  --intro-glow: rgba(244, 237, 224, 0.55);
}

/* While the intro is on-screen, lock the page underneath. */
html.intro-active,
html.intro-active body { overflow: hidden !important; }

/* ---------- Overlay shell ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(120% 90% at 50% 50%, var(--intro-bg-2) 0%, var(--intro-bg) 65%, #050505 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity .9s cubic-bezier(.6,.05,.2,1);
}

.intro.is-leaving { opacity: 0; pointer-events: none; }

/* Grain layer — SVG turbulence noise via data URI, blended over the gradient */
.intro::before {
  content: "";
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.97  0 0 0 0 0.9  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  animation: grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0) }
  20% { transform: translate(-3%,2%) }
  40% { transform: translate(2%,-2%) }
  60% { transform: translate(-1%,3%) }
  80% { transform: translate(3%,-1%) }
 100% { transform: translate(0,0) }
}

/* Subtle vertical vignette */
.intro::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* ---------- Stage that holds the SVG + final text ---------- */
.intro__stage {
  position: relative;
  width: min(92vw, 1200px);
  aspect-ratio: 1200 / 360;
  z-index: 1;
}

/* The hand-drawn SVG */
.intro__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 6px var(--intro-glow))
    drop-shadow(0 0 22px rgba(244, 237, 224, 0.18));
  opacity: 1;
  /* Fast fade-out so the rough SVG strokes are gone BEFORE the Sacrifice
     word fades in — prevents the visible misalignment that comes from
     overlapping two differently-shaped renderings of the same name. */
  transition: opacity .35s ease;
}

.intro__svg path,
.intro__svg .dot {
  fill: none;
  stroke: var(--intro-ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The dot above the i — drawn last as a filled ink-blot. */
.intro__svg .dot {
  fill: var(--intro-ink);
  stroke: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.intro.is-dot-on .intro__svg .dot { opacity: 1; }

/* Shimmer pulse layered on top of strokes — fired after draw completes. */
.intro__shimmer {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.55) 48%,
    rgba(255,255,255,0.0) 60%);
  mix-blend-mode: screen;
  transform: translateX(-30%);
}
.intro.is-shimmering .intro__shimmer {
  animation: shimmer 1100ms cubic-bezier(.4,.0,.2,1) forwards;
}
@keyframes shimmer {
  0%   { opacity: 0;   transform: translateX(-30%); }
  20%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateX(130%); }
}

/* Final filled Sacrifice text — fades in over the SVG, then SVG fades out. */
.intro__final {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sacrifice", "Brush Script MT", cursive;
  /* ← change the visible logo word here if you ever swap the name */
  font-size: clamp(140px, 22vw, 320px);
  line-height: 0.95;
  color: var(--intro-ink);
  letter-spacing: 0.005em;
  opacity: 0;
  transform: translateY(6px);
  /* Delay the fade-in until the SVG has fully faded out (see .intro__svg
     transition above: .35s). 0.45s delay gives a clean handoff. */
  transition: opacity .9s ease .45s, transform .9s ease .45s;
  filter:
    drop-shadow(0 0 8px var(--intro-glow))
    drop-shadow(0 0 28px rgba(244,237,224,0.18));
  user-select: none;
  pointer-events: none;
}
.intro.is-revealing .intro__final {
  opacity: 1;
  transform: translateY(0);
}
.intro.is-revealing .intro__svg { opacity: 0; }

/* Small studio line under the wordmark — fades in last. */
.intro__caption {
  position: absolute;
  left: 0; right: 0;
  bottom: -8vh;
  text-align: center;
  color: rgba(244, 237, 224, 0.55);
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.intro.is-revealing .intro__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion — skip drawing, just fade. */
@media (prefers-reduced-motion: reduce) {
  .intro__svg { display: none; }
  .intro__final { opacity: 1; transform: none; transition: none; }
  .intro { transition: opacity .4s ease; }
}

/* ====================================================================
   Body type — Montserrat is set on :root in Portfolio.html (--sans).
   Sacrifice is reserved for the intro wordmark and the home name only.
   ==================================================================== */