/* ==========================================================================
   Taharwah intro + hero entrance — standalone (no framework, no Tailwind)

   Ported 1:1 from the Next.js app:
     - components/public/IntroAnimation.tsx   (Stage A overlay)
     - components/public/HeroSection.tsx      (Stage B entrance, Stage C)
     - lib/introStore.ts                      (phases / gating → intro.js)
     - app/globals.css                        (keyframes)
   Every Tailwind class was converted to the exact CSS that Tailwind 3.4.19
   generates for it (compiled from the app's own tailwind.config.ts).
   Sizes are in rem, assuming the browser default 16px root, as in the app.

   Class prefix: ti-   (avoids collisions with the host site's CSS)
   ========================================================================== */


/* ── 1. Intro overlay (Stage A) ─────────────────────────────────────────── */
/* JS sets --intro-reveal-ms and --ti-fade-ms from INTRO_TUNING in intro.js,
   so intro.js is the single source of truth for timings. The fallbacks below
   are the same values. */

.ti-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* STEP 3: fades out in place. Opacity only, no transform. */
  opacity: 1;
  transition: opacity var(--ti-fade-ms, 550ms) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.ti-intro.is-fading { opacity: 0; }

.ti-intro__box {
  position: relative;
  /* min() of three terms so it can never overflow a phone */
  width: min(82vw, 62vh, 480px);
  height: min(82vw, 62vh, 480px);
}

@keyframes tiIntroClipReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

@keyframes tiIntroGlowBloom {
  0%   { opacity: 0;    transform: scale(0.86); }
  60%  { opacity: 0.45; transform: scale(0.98); }
  88%  { opacity: 1;    transform: scale(1.08); }  /* settle flash */
  100% { opacity: 0.62; transform: scale(1); }
}

/* The clipped logo: starts fully hidden (bottom inset 100%), wiped top → bottom. */
.ti-intro__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
  backface-visibility: hidden;
}
.ti-intro__clip.is-revealing {
  animation: tiIntroClipReveal var(--intro-reveal-ms, 1500ms)
             cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Gold bloom behind the logo, peaking as the wipe finishes. */
.ti-intro__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(184, 152, 106, 0.55) 0%,
              rgba(184, 152, 106, 0.22) 38%,
              transparent 70%);
  opacity: 0;
  transform: scale(0.86);
  will-change: opacity, transform;
  pointer-events: none;
}
.ti-intro__glow.is-revealing {
  animation: tiIntroGlowBloom var(--intro-reveal-ms, 1500ms) ease-out both;
}

/* Same as next/image `fill` + `object-contain` */
.ti-fill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: transparent;
  -webkit-user-drag: none;
}


/* ── 2. Hero: scoped base (the subset of Tailwind's preflight it relies on) ─ */

/* :where() keeps these at zero specificity, like Tailwind's element-level
   preflight, so every .ti-* class below wins over them. */
:where(.ti-hero, .ti-hero *, .ti-hero *::before, .ti-hero *::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  font-family: 'Cairo', sans-serif;
}
:where(.ti-hero) :where(h1, p) { margin: 0; font-size: inherit; font-weight: inherit; }
:where(.ti-hero) :where(a) { color: inherit; text-decoration: inherit; }
:where(.ti-hero) :where(img, svg) { display: block; vertical-align: middle; }
.ti-hero [hidden] { display: none !important; }


/* ── 3. Hero: layout and decoration ─────────────────────────────────────── */

.ti-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  direction: rtl;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(145deg, #141414 0%, #242424 45%, #3A3A3A 100%);
}

/* Mouse parallax wrappers. intro.js writes the transform. */
.ti-parallax {
  position: absolute;
  pointer-events: none;
  transform: translate(0px, 0px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Layer 1: noise (heavy, mounted after the intro) */
.ti-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Layer 2: gold orbs (heavy, mounted after the intro) */
.ti-orb { position: absolute; border-radius: 9999px; }
.ti-orb--1 {
  width: 600px; height: 600px; top: -15%; right: -10%;
  background: radial-gradient(circle at 40% 40%, rgba(184,152,106,0.22) 0%, transparent 65%);
  filter: blur(40px);
  animation: tiOrbPulse 8s ease-in-out infinite;
}
.ti-orb--2 {
  width: 500px; height: 500px; bottom: 5%; left: -12%;
  background: radial-gradient(circle at 60% 60%, rgba(184,152,106,0.16) 0%, transparent 65%);
  filter: blur(50px);
  animation: tiOrbPulse2 11s ease-in-out infinite;
}
.ti-orb--3 {
  width: 300px; height: 300px; top: 40%; left: 35%;
  background: radial-gradient(circle, rgba(184,152,106,0.1) 0%, transparent 70%);
  filter: blur(30px);
  animation: tiOrbPulse 8s ease-in-out infinite;
}

/* Layer 3: grid */
.ti-grid {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(184,152,106,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,152,106,1) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Layer 4: floating particles (heavy; intro.js builds all 55 after the intro) */
.ti-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ti-particle {
  position: absolute;
  border-radius: 9999px;
  background-color: #B8986A;
}

/* Layer 5: decorative lines */
.ti-line-v {
  position: absolute; top: 0; right: 0;
  width: 1px; height: 100%;
  opacity: 0.25;
  background: linear-gradient(to bottom, transparent 0%, #B8986A 30%, #B8986A 70%, transparent 100%);
}
.ti-line-d1,
.ti-line-d2 { position: absolute; display: none; width: 1px; }
.ti-line-d1 {
  top: 20%; right: 18%; height: 45%;
  opacity: 0.1;
  background: linear-gradient(to bottom, transparent, #B8986A, transparent);
  transform: rotate(25deg);
}
.ti-line-d2 {
  /* The app uses the class `opacity-8`, which does not exist in Tailwind's
     default scale, so no opacity is applied. Kept identical here. */
  top: 30%; right: 30%; height: 35%;
  background: linear-gradient(to bottom, transparent, #B8986A, transparent);
  transform: rotate(-15deg);
}

/* Desktop left-hand logo: positioning box (outer). The entrance is on the
   inner [data-ti="left-logo"], so the centring translate and the slide never
   overwrite each other. */
.ti-left-logo {
  position: absolute;
  pointer-events: none;
  display: none;                 /* hidden below 1024px (Tailwind `lg`) */
  align-items: center;
  justify-content: center;
  left: 210px;                   /* LEFT_LOGO_LEFT: box centre from left edge */
  top: 50vh;
  width: 380px;                  /* LEFT_LOGO_SIZE */
  height: 380px;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.ti-left-logo__inner {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 26px rgba(184,152,106,0.55));
}

/* Layer 6: watermark. In the app the parallax transform replaces its
   translateY(-50%), so only the parallax translate applies. Kept identical. */
.ti-watermark {
  display: none;                 /* lg:flex */
  align-items: center;
  justify-content: center;
  right: 5%;
  top: 50%;
}
.ti-watermark__box { position: relative; width: 380px; height: 380px; opacity: 0.06; }

/* Content column (right side, because the page is RTL) */
.ti-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 9rem 1rem;
  position: relative;
  z-index: 10;
  width: 100%;
}
.ti-col { max-width: 48rem; }

/* Small 90px logo. Its keyframe animations start at page load, as in the app,
   so they finish behind the hidden wrapper. */
.ti-mini-logo-row { margin-bottom: 2rem; }
.ti-mini-logo {
  position: relative;
  display: inline-block;
  border-radius: 1rem;
  animation: tiLogoReveal 1.5s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: 0ms;
}
.ti-mini-logo__ring {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  animation: tiLogoGlowSubtle 3s ease-in-out infinite;
}
.ti-mini-logo__img {
  position: relative;
  width: 90px;
  height: 90px;
  animation: tiLogoGlow 3s ease-in-out infinite;
}

/* Badge */
.ti-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  margin-bottom: 2.5rem;
  border-width: 1px;
  border-color: rgba(184,152,106,0.3);
  background-color: rgba(184,152,106,0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ti-badge__dot { position: relative; display: flex; width: 0.625rem; height: 0.625rem; }
.ti-badge__ping {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  opacity: 0.75;
  background-color: #B8986A;
  animation: tiPing 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ti-badge__core {
  position: relative;
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: #B8986A;
}
.ti-badge__text { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #B8986A; }

/* Name, lines 1 and 2 */
.ti-title {
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.25rem;
  letter-spacing: -0.025em;
}
.ti-title2-row { margin-bottom: 0.5rem; }
.ti-title2 {
  display: block;
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  background: linear-gradient(90deg, #8E6E45, #B8986A, #D4B896, #B8986A, #8E6E45);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: tiShimmer 3s linear infinite;
}

/* Gold underline.
   In the app this bar has BOTH `animate-draw-line` and `animate-line-glow`.
   They set the same `animation` property and the later rule (line-glow) wins,
   so the bar never draws. It stays 0px wide and only its glow shows, clipped
   by the 4px track. Kept identical. */
.ti-underline {
  position: relative;
  height: 0.25rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  overflow: hidden;
  max-width: 320px;
}
.ti-underline__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 9999px;
  background: linear-gradient(to left, #8E6E45, #B8986A, #D4B896, #B8986A);
  animation: tiLineGlow 2.5s ease-in-out infinite;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

/* English name */
.ti-en {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1.5rem;
  color: rgba(184,152,106,0.75);
}

/* Slogan */
.ti-slogan__row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.ti-slogan__rule { height: 1px; flex: 1 1 0%; max-width: 2rem; background-color: rgba(184,152,106,0.4); }
.ti-slogan__ar { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: #fff; }
.ti-slogan__en {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 2.5rem;
  margin-right: 2.75rem;
  color: rgba(255,255,255,0.35);
  font-style: italic;
}

/* CTA buttons */
.ti-cta { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 5rem; }
.ti-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 2.25rem;
  border-radius: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #fff;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.ti-btn:hover { transform: translate(0, -0.25rem); }
.ti-btn--primary {
  font-weight: 700;
  overflow: hidden;
  background-color: #B8986A;
}
.ti-btn--primary:hover { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.ti-btn__shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
}
.ti-btn--primary:hover .ti-btn__shine { opacity: 1; }
.ti-btn__label { position: relative; }
.ti-btn__arrow {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ti-btn--primary:hover .ti-btn__arrow { transform: translate(-0.25rem, 0); }
.ti-btn--ghost {
  font-weight: 600;
  border-width: 2px;
  border-color: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ti-btn--ghost:hover { background-color: rgb(255 255 255 / 0.1); }
.ti-btn__phone {
  width: 1.25rem;
  height: 1.25rem;
  color: #B8986A;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ti-btn--ghost:hover .ti-btn__phone { transform: scale(1.1); }

/* Stats */
.ti-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ti-stat { display: flex; align-items: center; gap: 0.75rem; }
.ti-stat__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(184,152,106,0.12);
  border: 1px solid rgba(184,152,106,0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ti-stat__icon svg { width: 1.5rem; height: 1.5rem; color: #B8986A; }
.ti-stat__value { font-size: 1.5rem; line-height: 1; font-weight: 900; color: #fff; }
.ti-stat__ar { color: rgb(156 163 175); font-size: 0.75rem; line-height: 1rem; margin-top: 0.125rem; }
.ti-stat__en { font-size: 0.75rem; line-height: 1rem; color: rgba(184,152,106,0.55); }

/* Scroll indicator */
.ti-scroll {
  position: absolute;
  bottom: 7rem;
  right: 50%;
  transform: translate(50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ti-scroll__label {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(184,152,106,0.5);
}
.ti-scroll__chevron {
  width: 1rem;
  height: 1rem;
  color: rgba(184,152,106,0.5);
  animation: tiBounce 1s infinite;
}

/* Phone FAB (desktop only). It is not part of the entrance: in the app it is
   visible from page load. */
.ti-fab {
  position: absolute;
  bottom: 6rem;
  left: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: none;                 /* lg:flex */
  align-items: center;
  justify-content: center;
  z-index: 20;
  background-color: #B8986A;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: tiPulseGold 2s ease-in-out infinite;
}
.ti-fab:hover { transform: scale(1.1); }
.ti-fab svg { width: 1.5rem; height: 1.5rem; color: #fff; }

/* Bottom wave */
.ti-wave { position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; }

/* Breakpoints: identical to Tailwind sm (640px) and lg (1024px) */
@media (min-width: 640px) {
  .ti-container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ti-title, .ti-title2 { font-size: 3.75rem; line-height: 1; }
  .ti-en { font-size: 1.875rem; line-height: 2.25rem; }
  .ti-cta { flex-direction: row; }
  .ti-stats { gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .ti-container { padding-left: 2rem; padding-right: 2rem; }
  .ti-title, .ti-title2 { font-size: 4.5rem; line-height: 1; }
  .ti-line-d1, .ti-line-d2 { display: block; }
  .ti-left-logo, .ti-watermark, .ti-fab { display: flex; }
}


/* ── 4. Stage B: the entrance ───────────────────────────────────────────────
   Default = hidden (Stage A and before). `.is-revealed` on the hero root
   (added by intro.js at phase 'done') = shown. Every element transitions
   independently, with its own duration, easing and delay.
   The easing cubic-bezier(0.4, 0, 0.2, 1) is Tailwind's default for
   `transition-all` / `transition-opacity`.                                  */

/* Text column wrapper: inline style in the app: `opacity 0.8s ease` */
.ti-hero [data-ti="content"] {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 800ms;
  transition-timing-function: ease;
  transition-delay: 0ms;
}

/* Rising items (transition-all duration-700) */
.ti-hero [data-ti="badge"],
.ti-hero [data-ti="title"],
.ti-hero [data-ti="title2"],
.ti-hero [data-ti="en"],
.ti-hero [data-ti="slogan"],
.ti-hero [data-ti="cta"],
.ti-hero [data-ti="stat-1"],
.ti-hero [data-ti="stat-2"],
.ti-hero [data-ti="stat-3"] {
  opacity: 0;
  transition-property: all;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ti-hero [data-ti="badge"]  { transform: translate(0, 1rem);   transition-delay: 0ms; }
.ti-hero [data-ti="title"]  { transform: translate(0, 2rem);   filter: blur(4px); transition-delay: 120ms; }
.ti-hero [data-ti="title2"] { transform: translate(0, 2rem);   filter: blur(4px); transition-delay: 220ms; }
.ti-hero [data-ti="en"]     { transform: translate(0, 1.5rem); transition-delay: 350ms; }
.ti-hero [data-ti="slogan"] { transform: translate(0, 1.5rem); transition-delay: 450ms; }
.ti-hero [data-ti="cta"]    { transform: translate(0, 1.5rem); transition-delay: 560ms; }
.ti-hero [data-ti="stat-1"] { transform: translate(0, 1.5rem); transition-delay: 680ms; }
.ti-hero [data-ti="stat-2"] { transform: translate(0, 1.5rem); transition-delay: 780ms; }
.ti-hero [data-ti="stat-3"] { transform: translate(0, 1.5rem); transition-delay: 880ms; }

/* Underline track (transition-opacity duration-300) */
.ti-hero [data-ti="underline"] {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 500ms;
}

/* Scroll indicator: fades only; keeps its centring translate in both states */
.ti-hero [data-ti="scroll"] {
  opacity: 0;
  transition-property: all;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 1100ms;
}

/* Desktop left logo: slides in from the left */
.ti-hero [data-ti="left-logo"] {
  opacity: 0;
  transform: translateX(-64px);                 /* LEFT_LOGO_SLIDE_PX */
  transition:
    opacity   900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);   /* LEFT_LOGO_DUR_MS */
  transition-delay: 300ms;                      /* LEFT_LOGO_DELAY_MS */
}

/* ── Shown state (Stage B → C) ── */
.ti-hero.is-revealed [data-ti="content"],
.ti-hero.is-revealed [data-ti="underline"],
.ti-hero.is-revealed [data-ti="scroll"] { opacity: 1; }

.ti-hero.is-revealed [data-ti="badge"],
.ti-hero.is-revealed [data-ti="en"],
.ti-hero.is-revealed [data-ti="slogan"],
.ti-hero.is-revealed [data-ti="cta"],
.ti-hero.is-revealed [data-ti="stat-1"],
.ti-hero.is-revealed [data-ti="stat-2"],
.ti-hero.is-revealed [data-ti="stat-3"] { opacity: 1; transform: translate(0, 0); }

.ti-hero.is-revealed [data-ti="title"],
.ti-hero.is-revealed [data-ti="title2"] { opacity: 1; transform: translate(0, 0); filter: blur(0); }

.ti-hero.is-revealed [data-ti="left-logo"] { opacity: 1; transform: translateX(0); }


/* ── 5. Keyframes used by the hero (copied from app/globals.css and Tailwind) ── */

@keyframes tiLogoReveal {
  0%   { opacity: 0; transform: scale(0.55); filter: blur(6px) drop-shadow(0 0 0px rgba(184,152,106,0)); }
  60%  { opacity: 0.9; transform: scale(1.04); filter: blur(0px) drop-shadow(0 0 12px rgba(184,152,106,0.6)); }
  100% { opacity: 1; transform: scale(1); filter: blur(0px) drop-shadow(0 0 8px rgba(184,152,106,0.35)); }
}
@keyframes tiLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px  rgba(184,152,106,0.3)) drop-shadow(0 0 12px rgba(184,152,106,0.15)); }
  50%       { filter: drop-shadow(0 0 14px rgba(184,152,106,0.7)) drop-shadow(0 0 28px rgba(184,152,106,0.3)); }
}
@keyframes tiLogoGlowSubtle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,152,106,0); }
  50%       { box-shadow: 0 0 16px 4px rgba(184,152,106,0.25); }
}
@keyframes tiShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes tiParticleFloat {
  0%   { opacity: 0;   transform: translateY(0px) scale(0.5); }
  15%  { opacity: 1; }
  85%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(-120px) scale(1.2); }
}
@keyframes tiOrbPulse {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.12; }
  33%       { transform: scale(1.15) translate(6px, -8px); opacity: 0.18; }
  66%       { transform: scale(0.9) translate(-4px, 6px); opacity: 0.1; }
}
@keyframes tiOrbPulse2 {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.08; }
  50%       { transform: scale(1.2) translate(-10px, 10px); opacity: 0.15; }
}
@keyframes tiLineGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(184,152,106,0.6); }
  50%       { box-shadow: 0 0 20px rgba(184,152,106,1), 0 0 40px rgba(184,152,106,0.4); }
}
@keyframes tiPulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 152, 106, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(184, 152, 106, 0); }
}
@keyframes tiPing {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes tiBounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%       { transform: none;            animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}


/* ── 6. Reduced motion ──────────────────────────────────────────────────────
   Same rule as the app. intro.js also skips the overlay entirely. The app
   applies this to the whole page (`*`); here it is scoped to the intro and
   the hero so it doesn't change the rest of the host site. */
@media (prefers-reduced-motion: reduce) {
  .ti-intro, .ti-intro *, .ti-intro *::before, .ti-intro *::after,
  .ti-hero,  .ti-hero *,  .ti-hero *::before,  .ti-hero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}