/* ═══════════════════════════════════════════════════════════
   CROWN TANDOORI — Intro + 3D Scroll  (v5)
   Fire removed. Smooth logo reveal + depth on scroll.
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll lock while intro plays ── */
body.intro-lock { overflow: hidden; }
body.intro-lock #preloader { opacity: 0; pointer-events: none; }

/* ═══════════════════════════════
   LOGO INTRO
═══════════════════════════════ */
#intro {
  position: fixed; inset: 0; z-index: 10000;
  background: #050505;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
#intro.out { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* Ambient glow that blooms behind the logo */
#intro::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: min(150vw, 1100px); height: min(150vw, 1100px);
  transform: translate(-50%,-50%) scale(.4);
  background: radial-gradient(circle,
      rgba(255,215,0,.16) 0%,
      rgba(255,140,0,.07) 32%,
      rgba(231,76,60,.04) 52%,
      transparent 70%);
  opacity: 0;
  pointer-events: none;
}
#intro.play::before { animation: introGlow 3.2s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes introGlow {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: .85; transform: translate(-50%,-50%) scale(1.1); }
}

/* Fine vignette for depth */
#intro::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
}

.intro-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}

/* ── The logo ── */
#intro-logo {
  width: min(66vw, 460px);
  opacity: 0;
  transform: scale(.86) translateY(16px);
  filter: blur(14px) drop-shadow(0 0 0 rgba(255,215,0,0));
  will-change: transform, opacity, filter;
}
#intro.play #intro-logo {
  animation: logoIn 1.6s cubic-bezier(.22,1,.36,1) .35s forwards;
}
@keyframes logoIn {
  0%   { opacity: 0; transform: scale(.86) translateY(16px); filter: blur(14px) drop-shadow(0 0 0 rgba(255,215,0,0)); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0);
         filter: blur(0) drop-shadow(0 6px 40px rgba(255,180,40,.32)); }
}

/* Shimmer sweep across the logo */
.intro-logo-wrap { position: relative; display: inline-block; overflow: hidden; }
.intro-logo-wrap::after {
  content: '';
  position: absolute; top: -10%; left: -60%;
  width: 45%; height: 120%;
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,.06) 35%,
      rgba(255,240,190,.42) 50%,
      rgba(255,255,255,.06) 65%,
      transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
#intro.play .intro-logo-wrap::after {
  animation: shimmer 1.5s cubic-bezier(.4,0,.2,1) 1.15s;
}
@keyframes shimmer {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ── Gold underline that draws out ── */
.intro-rule {
  width: min(52vw, 320px); height: 2px;
  background: linear-gradient(90deg, transparent, #FFD700 18%, #ffeb99 50%, #FFD700 82%, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  border-radius: 2px;
}
#intro.play .intro-rule {
  animation: ruleIn 1.1s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
@keyframes ruleIn {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ── Tagline fades up ── */
.intro-tag {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  opacity: 0;
  transform: translateY(10px);
  white-space: nowrap;
}
#intro.play .intro-tag {
  animation: tagIn 1s cubic-bezier(.22,1,.36,1) 1.8s forwards;
}
@keyframes tagIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Skip ── */
#intro-skip {
  position: absolute; bottom: 28px; right: 28px; z-index: 3;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.6);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  padding: 9px 20px; border-radius: 30px; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: all .3s;
}
#intro.play #intro-skip { animation: skipIn .5s ease 1.2s forwards; }
@keyframes skipIn { to { opacity: 1; } }
#intro-skip:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Hero height is governed by style.css (kept here intentionally empty so the
   main stylesheet stays the single source of truth for layout). */

/* ═══════════════════════════════
   REVEAL ON SCROLL  (gentle fade-up — minimal & premium)
   Was an aggressive 3D tilt; softened to a quiet lift that also
   reads correctly the instant a section is jumped to.
═══════════════════════════════ */
.tilt3d {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.tilt3d.tilt-in { opacity: 1; transform: none; }

.tilt3d.stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.tilt3d.tilt-in.stagger > * { opacity: 1; transform: none; }
.tilt3d.tilt-in.stagger > *:nth-child(1){transition-delay:.03s}
.tilt3d.tilt-in.stagger > *:nth-child(2){transition-delay:.07s}
.tilt3d.tilt-in.stagger > *:nth-child(3){transition-delay:.11s}
.tilt3d.tilt-in.stagger > *:nth-child(4){transition-delay:.15s}
.tilt3d.tilt-in.stagger > *:nth-child(5){transition-delay:.19s}
.tilt3d.tilt-in.stagger > *:nth-child(6){transition-delay:.23s}
.tilt3d.tilt-in.stagger > *:nth-child(7){transition-delay:.27s}
.tilt3d.tilt-in.stagger > *:nth-child(8){transition-delay:.31s}

.tilt-hover { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }

[data-depth], [data-hero-layer] { will-change: transform; }

.info-bar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.info-bar.tilt-in { opacity: 1; transform: none; }

.intro-done .hero-content .reveal { animation: heroFloat .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroFloat { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:translateY(0);} }

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  .tilt3d, .tilt3d.stagger > * { transform: none !important; opacity: 1 !important; }
  [data-depth], [data-hero-layer] { transform: none !important; }
  .info-bar { opacity: 1 !important; transform: none !important; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .tilt3d { transform: translateY(16px); }
  #intro-skip { bottom: 20px; right: 20px; }
}