/* ============================================================
   CodebyCarter — intro.css
   Luxury black loading curtain — onyx background, italic-serif
   codebycarter wordmark, thin gold load bar. Premium opening
   moment like a fashion-house brand drop.
   ============================================================ */

.intro-curtain{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  background:#050505 !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none;
  overflow:hidden;
  animation:introDismiss 0.85s cubic-bezier(.76,0,.24,1) 1.85s forwards;
}
@keyframes introDismiss{
  0%{transform:translateY(0);opacity:1}
  60%{opacity:1}
  100%{transform:translateY(-105%);opacity:0;visibility:hidden}
}

/* Hide the old mark inside the curtain — we're replacing the whole vibe */
.intro-curtain .intro-mark{display:none !important}

/* Subtle gold ambient glow */
.intro-curtain::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(800px 600px at 50% 40%, rgba(200,169,81,.12), transparent 60%),
    radial-gradient(600px 500px at 50% 75%, rgba(168,85,247,.06), transparent 65%);
  pointer-events:none;
}
/* Vignette */
.intro-curtain::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* ============================================================
   STAGE — center column of the curtain content
   ============================================================ */
.intro-stage{
  position:relative;z-index:2;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:0 24px;
}

/* === Top hairline edge === */
.intro-edge{
  position:absolute;left:50%;transform:translateX(-50%);
  width:80vw;max-width:880px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,169,81,.45) 30%, rgba(200,169,81,.45) 70%, transparent);
  opacity:0;
  animation:introEdge 1.2s cubic-bezier(.4,0,.2,1) .1s forwards;
}
.intro-edge--top{top:80px}
.intro-edge--bottom{bottom:80px;animation-delay:.2s}
@keyframes introEdge{
  from{opacity:0;transform:translateX(-50%) scaleX(.3)}
  to{opacity:1;transform:translateX(-50%) scaleX(1)}
}

/* === Studio tag above wordmark === */
.intro-studio{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.38em;text-transform:uppercase;
  color:rgba(200,169,81,.85);font-weight:600;
  margin-bottom:32px;opacity:0;
  animation:introFadeUp .9s cubic-bezier(.16,1,.3,1) .35s forwards;
}
.intro-studio::before,
.intro-studio::after{
  content:"·";margin:0 14px;color:rgba(200,169,81,.5);
}

/* === WORDMARK — the hero of the curtain === */
.intro-wordmark{
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(64px,11vw,156px);
  line-height:.92;
  letter-spacing:-.035em;
  color:#F2EDE0;
  white-space:nowrap;
  opacity:0;
  animation:introFadeUp 1.2s cubic-bezier(.16,1,.3,1) .55s forwards;
  text-shadow:0 8px 40px rgba(200,169,81,.18);
}
.intro-wordmark .intro-c{
  display:inline-block;
  font-size:1.20em;
  letter-spacing:-.10em;
  margin-right:-2px;
  background:linear-gradient(135deg,#FFE8A0 0%,#D4A437 50%,#8B6914 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 18px rgba(212,164,55,.35));
}
.intro-wordmark .intro-period{
  display:inline-block;
  margin-left:2px;
  background:linear-gradient(135deg,#FFE8A0 0%,#D4A437 50%,#8B6914 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* === Tagline below === */
.intro-tagline{
  margin-top:28px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:.30em;text-transform:uppercase;
  color:rgba(232,220,176,.55);font-weight:500;
  opacity:0;
  animation:introFadeUp .9s cubic-bezier(.16,1,.3,1) .80s forwards;
}

/* === Load bar === */
.intro-loadbar{
  margin-top:46px;
  width:clamp(180px,28vw,300px);
  height:1.5px;
  background:rgba(200,169,81,.12);
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:introFadeUp .8s cubic-bezier(.16,1,.3,1) 1.0s forwards;
}
.intro-loadbar-fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:linear-gradient(90deg,#8B6914,#D4A437,#FFE8A0,#D4A437);
  background-size:200% 100%;
  animation:introLoad 1.3s cubic-bezier(.65,0,.35,1) 1.0s forwards, introShimmer 1.3s linear 1.0s forwards;
  box-shadow:0 0 12px rgba(212,164,55,.6);
}
@keyframes introLoad{
  from{width:0%}
  to{width:100%}
}
@keyframes introShimmer{
  from{background-position:0% 50%}
  to{background-position:200% 50%}
}

/* === Bottom "loading" caption === */
.intro-meta{
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(232,220,176,.35);font-weight:500;
  opacity:0;
  animation:introFadeUp .8s cubic-bezier(.16,1,.3,1) 1.15s forwards;
}

/* === Crosshair corner marks === */
.intro-corner{
  position:absolute;width:24px;height:24px;
  opacity:0;
  animation:introFadeIn .8s ease .25s forwards;
}
.intro-corner::before,
.intro-corner::after{
  content:"";position:absolute;background:rgba(200,169,81,.45);
}
.intro-corner::before{width:100%;height:1px;top:50%;transform:translateY(-50%)}
.intro-corner::after{width:1px;height:100%;left:50%;transform:translateX(-50%)}
.intro-corner--tl{top:34px;left:34px}
.intro-corner--tr{top:34px;right:34px}
.intro-corner--bl{bottom:34px;left:34px}
.intro-corner--br{bottom:34px;right:34px}

/* ============================================================
   Shared animations
   ============================================================ */
@keyframes introFadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes introFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* === Page locked until curtain dismisses === */
html.intro-locked,
body.intro-locked{overflow:hidden}

/* === Mobile === */
@media (max-width:600px){
  .intro-edge--top{top:50px}
  .intro-edge--bottom{bottom:50px}
  .intro-corner{width:18px;height:18px}
  .intro-corner--tl{top:20px;left:20px}
  .intro-corner--tr{top:20px;right:20px}
  .intro-corner--bl{bottom:20px;left:20px}
  .intro-corner--br{bottom:20px;right:20px}
  .intro-studio::before,
  .intro-studio::after{display:none}
}

/* === Reduced motion: shorter / less motion === */
@media (prefers-reduced-motion:reduce){
  .intro-curtain{animation-delay:1.0s !important;animation-duration:.4s !important}
  .intro-studio,.intro-wordmark,.intro-tagline,.intro-loadbar,.intro-meta,.intro-edge,.intro-corner{
    animation-duration:.2s !important;animation-delay:0s !important;
  }
}