/* ==========================================================================
   LOVELY EVENTS & DECORATION — hero.css
   Royal, cinematic, animated hero + logo navbar brand.
   Loads AFTER styles.css: relies on cascade order (not !important) to win
   ties, and only redeclares the specific properties it needs to change.
   Uses the same design tokens (--color-*, --ease, --dur-*, --damask) defined
   in styles.css :root. No build step, plain CSS.
   ========================================================================== */

/* One easing curve for the whole hero entrance so it reads as a single move. */
:root { --hero-ease: cubic-bezier(.22, .8, .3, 1); }

/* --------------------------------------------------------------------------
   0. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   1. Navbar / drawer brand — emblem + Cinzel wordmark lockup
   -------------------------------------------------------------------------- */
.brand-royal {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-direction: row;
  transition: transform var(--dur-fast) var(--ease);
  transform-origin: left center;
}
.site-header.scrolled .brand-royal { transform: scale(.9); }

.brand-emblem {
  display: block;
  flex: 0 0 auto;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(201, 164, 92, 0));
  transform: rotate(-90deg) scale(.6);
  animation:
    brand-emblem-in .8s var(--ease) .1s forwards,
    brand-emblem-glow 3.6s ease-in-out 1s infinite;
}
@media (min-width: 768px) { .brand-emblem { height: 44px; width: 44px; } }

@keyframes brand-emblem-in {
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes brand-emblem-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(201, 164, 92, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(201, 164, 92, .65)); }
}

.brand-royal:hover .brand-emblem,
.brand-royal:focus-visible .brand-emblem {
  animation: brand-emblem-in .8s var(--ease) forwards, brand-emblem-spin .9s var(--ease);
}
@keyframes brand-emblem-spin {
  from { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px rgba(201, 164, 92, .5)); }
  50% { filter: drop-shadow(0 0 10px rgba(233, 207, 142, .9)); }
  to { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 2px rgba(201, 164, 92, .5)); }
}

.brand-wordwrap {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(6px);
  animation: hero-fade-up .6s var(--ease) .38s forwards;
  position: relative;
}
.brand-word {
  font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .1em;
  color: var(--color-text);
  white-space: nowrap;
  position: relative;
  width: fit-content;
}
.brand-word .brand-l { color: var(--color-secondary); }
.brand-word::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary-light));
  transition: right var(--dur-med) var(--ease);
}
.brand-royal:hover .brand-word::after,
.brand-royal:focus-visible .brand-word::after { right: 0; }

.brand-sub-royal {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: .38rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.brand-sub-royal .brand-l-alt { color: var(--color-secondary-light); }

@media (min-width: 768px) {
  .brand-word { font-size: 1.15rem; }
  .brand-sub-royal { font-size: .46rem; }
}
@media (min-width: 900px) {
  .brand-word { font-size: 1.3rem; }
  .brand-sub-royal { font-size: .5rem; }
}

.brand-royal--drawer .brand-emblem { height: 30px; width: 30px; }
.brand-royal--drawer .brand-word { font-size: .98rem; }
.brand-royal--drawer .brand-sub-royal { font-size: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .brand-emblem { animation: none !important; opacity: 1; transform: none; filter: none; }
  .brand-wordwrap { animation: none !important; opacity: 1; transform: none; }
  .brand-royal:hover .brand-emblem, .brand-royal:focus-visible .brand-emblem { animation: none; }
  .brand-word::after { transition: none; }
}

/* --------------------------------------------------------------------------
   2. Hero media — royal backdrop, curtains, gradient, particles, glow
   -------------------------------------------------------------------------- */
.hero-backdrop { position: absolute; inset: 0; display: block; }
.hero-backdrop img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 38%;
  animation: hero-backdrop-kb 30s ease-in-out infinite alternate;
}
@keyframes hero-backdrop-kb {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-backdrop img { animation: none; } }

/* Thin curtain-edge overlays: subtle extra fabric fold + sway at the far
   left/right, layered above the SVG backdrop's own curtains for a touch of
   living motion. Kept very subtle so it reads as ambience, not a distraction. */
.hero-curtain-edge {
  position: absolute; top: 0; bottom: 0; width: min(9vw, 90px);
  z-index: 1; pointer-events: none;
  opacity: .55;
  transform-origin: top center;
  animation: hero-curtain-sway 9s ease-in-out infinite alternate;
}
.hero-curtain-edge--l {
  left: 0;
  background: linear-gradient(90deg, rgba(87, 10, 14, .55), rgba(87, 10, 14, 0));
}
.hero-curtain-edge--r {
  right: 0;
  background: linear-gradient(270deg, rgba(87, 10, 14, .55), rgba(87, 10, 14, 0));
  animation-delay: -4.5s;
}
@keyframes hero-curtain-sway {
  from { transform: rotate(-.5deg) scaleY(1); }
  to { transform: rotate(.5deg) scaleY(1.01); }
}
@media (prefers-reduced-motion: reduce) { .hero-curtain-edge { animation: none; } }
@media (max-width: 640px) { .hero-curtain-edge { display: none; } }

/* Soft pulsing warm glow behind the headline column. */
.hero-glow {
  position: absolute;
  left: 50%; top: 46%;
  width: min(900px, 90vw); height: min(560px, 60vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(215, 25, 32, .12), rgba(201, 164, 92, .05) 55%, transparent 78%);
  z-index: 1;
  pointer-events: none;
  animation: hero-glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes hero-glow-pulse {
  from { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  to { opacity: .85; transform: translate(-50%, -50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; opacity: .7; } }

/* Gold bokeh / light-particle canvas, drawn by hero.js. Sits above the
   gradient so flecks read clearly against the dark vignette. Decorative only
   (aria-hidden + pointer-events:none), safe to leave empty if JS never runs. */
.hero-particles {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hero-particles { display: none; } }

/* --------------------------------------------------------------------------
   3. Ornate corner frame (SVG draw-in)
   -------------------------------------------------------------------------- */
.hero-frame { z-index: 3; }
.frame-svg {
  position: absolute;
  width: clamp(48px, 8vw, 96px);
  height: auto;
  overflow: visible;
  color: var(--color-accent);
}
.frame-svg.tl { top: 0; left: 0; }
.frame-svg.tr { top: 0; right: 0; transform: scaleX(-1); }
.frame-svg.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.frame-svg.br { bottom: 0; right: 0; transform: scale(-1, -1); }

.frame-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .85;
}
.frame-svg .frame-bracket { animation: hero-frame-draw 1.2s var(--hero-ease) .3s forwards; }
.frame-svg .frame-flourish { animation: hero-frame-draw 1s var(--hero-ease) .9s forwards; }
.frame-svg .frame-dot {
  fill: var(--color-accent);
  opacity: 0;
  animation: hero-frame-dot .5s ease 1.7s forwards;
}
@keyframes hero-frame-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-frame-dot { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .frame-svg path { animation: none; stroke-dashoffset: 0; }
  .frame-svg .frame-dot { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. Hero content — blessing line, wordmark, subline, script, CTAs
   -------------------------------------------------------------------------- */
.hero-blessing {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem;
  opacity: 0;
  animation: hero-fade-up .8s var(--hero-ease) .2s forwards;
}
.blessing-rule {
  width: 40px; height: 1px; flex: 0 1 40px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
  transform: scaleX(0);
  transform-origin: right;
  animation: hero-rule-draw .9s var(--hero-ease) .2s forwards;
}
.hero-blessing .blessing-rule:last-child {
  background: linear-gradient(90deg, var(--color-accent), transparent);
  transform-origin: left;
}
@media (max-width: 420px) { .blessing-rule { width: 22px; flex-basis: 22px; } }
@keyframes hero-rule-draw { to { transform: scaleX(1); } }

/* Headline word: gold-sheen Cinzel Decorative, split into per-letter spans
   for a rise + un-blur stagger entrance. The h1 itself carries the accessible
   name; everything inside is presentational and hidden from AT. */
.hero-h1-word {
  display: block;
  text-align: center;
  position: relative;
  font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 2rem + 7vw, 7.5rem);
  letter-spacing: .06em;
  line-height: 1;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .55));
  overflow: visible;
}
.hero-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  /* Two background layers, both clipped to the letter glyph itself so the
     shimmer never bleeds into the dark backdrop between letters: a moving
     bright band on top, the permanent gold-sheen gradient underneath. */
  background-image:
    linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%),
    linear-gradient(180deg, #FFFDF8 0%, var(--color-text) 45%, #E9CF8E 78%, var(--color-accent) 100%);
  background-size: 260% 260%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 46px rgba(201, 164, 92, .35);
  animation:
    hero-letter-in .9s var(--hero-ease) forwards,
    hero-letter-shine 7s ease-in-out infinite;
  /* rise + un-blur 0.5s -> 1.3s (160ms stagger); first gold sweep ~2.6s, then every 7s */
  animation-delay: calc(.5s + var(--li, 0) * 160ms), calc(2.6s + var(--li, 0) * 60ms);
}
.hero-letter-first {
  background: none; -webkit-text-fill-color: var(--color-secondary-light);
  color: var(--color-secondary-light);
  text-shadow: 0 0 30px rgba(215, 25, 32, .35);
  animation: hero-letter-in .9s var(--hero-ease) forwards;
  animation-delay: calc(.5s + var(--li, 0) * 160ms);
}
@keyframes hero-letter-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes hero-letter-shine {
  0% { background-position: 150% 0, 0 0; }
  24% { background-position: -60% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}

.hero-sub-track {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, .3rem + .8vw, 1.1rem);
  margin: .85rem 0 0;
  color: var(--color-text);
  opacity: 0;
  animation: hero-fade-up .8s var(--hero-ease) 1.4s forwards;
}
.hero-sub-track .sub-text {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(.62rem, .4rem + .7vw, 1.05rem);
  letter-spacing: .28em;
  white-space: nowrap;
}
.hero-sub-track .rule {
  flex: 0 1 64px; width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-secondary-light));
  transform: scaleX(0);
  transform-origin: right;
  animation: hero-rule-draw .9s var(--hero-ease) 1.4s forwards;
}
.hero-sub-track .rule:last-child {
  background: linear-gradient(90deg, var(--color-secondary-light), transparent);
  transform-origin: left;
}
.hero-sub-track .accent { color: var(--color-secondary-light); }
@media (max-width: 520px) {
  .hero-sub-track .sub-text { letter-spacing: .16em; font-size: .58rem; }
  .hero-sub-track .rule { flex-basis: 26px; width: 26px; }
}

.hero-style {
  text-shadow: 0 0 20px rgba(201, 164, 92, .55), 0 0 3px rgba(201, 164, 92, .8);
  clip-path: inset(0 100% 0 0);
  animation: hero-style-write 1.1s var(--hero-ease) 1.7s forwards;
}
@keyframes hero-style-write { to { clip-path: inset(0 0 0 0); } }

.hero-tagline {
  opacity: 0;
  animation: hero-fade-up .8s var(--hero-ease) 2s forwards;
}

.hero-actions {
  opacity: 0;
  animation: hero-fade-up .8s var(--hero-ease) 2.2s forwards;
}
.hero-actions .btn {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-fade-up .7s var(--hero-ease) forwards;
}
.hero-actions .btn:nth-child(1) { animation-delay: 2.2s; }
.hero-actions .btn:nth-child(2) { animation-delay: 2.3s; }
.hero-actions .btn:nth-child(3) { animation-delay: 2.4s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gold shine sweep loop on the primary CTA. */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: hero-shine 4.6s ease-in-out infinite;
}
@keyframes hero-shine {
  0%   { left: -60%; }
  16%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .btn-shine::after { display: none; } }

/* --------------------------------------------------------------------------
   5. Reduced motion — everything above becomes fully visible and static
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-blessing,
  .blessing-rule,
  .hero-letter,
  .hero-sub-track,
  .hero-sub-track .rule,
  .hero-style,
  .hero-tagline,
  .hero-actions,
  .hero-actions .btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .hero-h1-word::after { display: none; }
}

/* --------------------------------------------------------------------------
   6. Responsive safety — keep "LOVELY" on a single line at phone widths.
   Letters are separate inline-block spans (for the stagger animation), so
   without an explicit nowrap the browser is free to line-break between them
   once their combined width exceeds the container — which happened at
   360-430px, splitting the word into "LOVEL" / "Y". Force one line and scale
   the clamp down (font-size + letter-spacing) so it actually fits instead of
   overflowing.
   -------------------------------------------------------------------------- */
.hero-h1-word { white-space: nowrap; }
@media (max-width: 480px) {
  .hero-h1-word {
    font-size: clamp(1.7rem, 1rem + 6.5vw, 2.6rem);
    letter-spacing: .01em;
  }
}
@media (max-width: 340px) {
  .hero-h1-word { font-size: 1.7rem; letter-spacing: 0; }
}

/* --------------------------------------------------------------------------
   7. Showreel video layer + cinematic contrast overlay
   Stack (bottom -> top): SVG backdrop (fallback) / video / curtain edges /
   shade + grain / particles / frame / text. The video starts hidden and
   fades in once it is really playing (class .is-ready, set by hero.js).
   -------------------------------------------------------------------------- */
.hero-video,
.hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  background: transparent;
}
.hero-video.is-ready,
.hero-poster.is-ready { opacity: 1; }
.hero-video[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-poster { transition: none; }
}

/* Shade: centre vignette behind the text, top scrim for the navbar, bottom
   fade into the page black. Alphas tuned against the brightest frames (stage
   lights / birthday sets) so cream title text stays >= 4.5:1. */
.hero-gradient {
  z-index: 1;
  background:
    radial-gradient(ellipse 75% 62% at 50% 56%, rgba(8, 3, 5, .66) 0%, rgba(8, 3, 5, .5) 45%, rgba(8, 3, 5, .14) 100%),
    linear-gradient(180deg, rgba(8, 3, 5, .72) 0%, rgba(8, 3, 5, .28) 22%, rgba(8, 3, 5, .22) 55%, rgba(11, 11, 12, .82) 88%, #0b0b0c 100%);
}
@media (max-width: 767px) {
  .hero-gradient {
    background:
      radial-gradient(ellipse 120% 58% at 50% 62%, rgba(8, 3, 5, .72) 0%, rgba(8, 3, 5, .52) 55%, rgba(8, 3, 5, .2) 100%),
      linear-gradient(180deg, rgba(8, 3, 5, .72) 0%, rgba(8, 3, 5, .3) 20%, rgba(8, 3, 5, .3) 50%, rgba(11, 11, 12, .86) 86%, #0b0b0c 100%);
  }
}

/* Film grain: static tiled fractal noise, very low opacity, gently jittered
   in steps (cheap, GPU-only transform) for a filmic feel. */
.hero-grain {
  position: absolute; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: hero-grain 1s steps(6) infinite;
}
@keyframes hero-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-grain { animation: none; } }

/* Text legibility over moving photos */
.hero-blessing { text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.hero-sub-track { text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
.hero-tagline { color: #e4e0d8; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.hero-style { text-shadow: 0 0 18px rgba(0, 0, 0, .85), 0 0 22px rgba(201, 164, 92, .5), 0 0 3px rgba(201, 164, 92, .8); }

/* Curtain edge overlays: keep, but quieter over the video */
.hero-curtain-edge { opacity: .35; mix-blend-mode: multiply; }

/* --------------------------------------------------------------------------
   8. "Tamil Nadu Style" script: proper size + breathing room at every width
   (was cramped against the rules at 320px). Padding gives the clip-path write
   reveal room for Great Vibes' swashes and descenders.
   -------------------------------------------------------------------------- */
.hero-style {
  font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3.4rem);
  line-height: 1.25;
  margin-top: clamp(.85rem, .6rem + 1vw, 1.5rem);
  padding: .1em .3em .15em;
}
.hero-tagline { margin-top: clamp(.5rem, .3rem + .6vw, 1rem); }

/* --------------------------------------------------------------------------
   9. Slim scroll cue: label + hairline with a travelling gold bead.
   44px+ hit area, fades in after the CTAs.
   -------------------------------------------------------------------------- */
.scroll-cue {
  width: 44px; height: auto; min-height: 44px;
  bottom: 10px;
  border: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 6px;
  opacity: 0;
  animation: hero-fade-up .8s var(--hero-ease) 2.8s forwards;
  /* hero-fade-up animates translateY; keep the centring via left/margin instead of transform */
  transform: none; left: 50%; margin-left: -22px;
}
.scroll-cue .scroll-cue-label,
.scroll-cue .scroll-cue-line {
  /* neutralise the legacy mouse-pill `.scroll-cue span` dot rules in styles.css */
  position: relative; top: auto; left: auto; transform: none;
  width: auto; height: auto; border-radius: 0; background: none; animation: none;
}
.scroll-cue .scroll-cue-label {
  font: 600 .6rem/1 'Cinzel', Georgia, serif;
  letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.scroll-cue .scroll-cue-line {
  display: block;
  width: 1px; height: 34px;
  background: rgba(245, 243, 239, .28);
  overflow: hidden;
}
.scroll-cue-line::after {
  content: ''; position: absolute; left: 0; top: -40%;
  width: 100%; height: 40%;
  background: linear-gradient(180deg, transparent, var(--color-accent));
  animation: hero-cue-run 2.2s var(--hero-ease) 3.2s infinite;
}
@keyframes hero-cue-run {
  0% { top: -40%; }
  70%, 100% { top: 100%; }
}
@media (max-width: 560px) {
  /* sits in the reserved bottom padding, clear of the floating buttons on the right */
  .scroll-cue { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none !important; opacity: 1 !important; }
  .scroll-cue-line::after { animation: none; top: 30%; }
}

/* Room under the CTAs for the scroll cue (mobile already reserves 112px for the FABs) */
@media (min-width: 561px) {
  .hero-content { padding-bottom: calc(clamp(2.5rem, 4vw, 5rem) + 64px); }
}