svg*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
  --void:        #04020c;
  --amethyst:    #6b2fa0;
  --lavender:    #c89eff;
  --lavender-lite: #d287fb;
  --gold:        #e8c84a;
  --gold-pale:   #f5e4a0;
  --gold-glow:   #ffda00;
  --teal:        #00d4c8;
  --teal-glow:   #00ffee;
}

    html, body {
      width: 100%;
      min-height: 100%;
      min-height: 100dvh;
      background: var(--void);
    }

    body {
      overflow-x: hidden;
      overflow-y: auto;
    }

    /* ══════════════════════════════════════════
       VIDEO BACKGROUND
    ══════════════════════════════════════════ */
    .video-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
    }

    .video-placeholder {
      width: 100%;
      height: 100%;
      background:
        radial-gradient(ellipse at 50% 0%,   #2a0a50 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%,  #0a1a40 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%,  #1a0a30 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%,  #0d0520 0%, #04020c 100%);
      animation: bgPulse 8s ease-in-out infinite alternate;
    }

    @keyframes bgPulse {
      0%   { filter: hue-rotate(0deg)   brightness(1); }
      50%  { filter: hue-rotate(20deg)  brightness(1.08); }
      100% { filter: hue-rotate(-15deg) brightness(0.95); }
    }

    /* Animated starfield */
    .stars {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .star {
      position: absolute;
      background: white;
      border-radius: 50%;
      animation: twinkle var(--dur) ease-in-out infinite alternate;
      opacity: 0;
    }

    @keyframes twinkle {
      0%   { opacity: 0; transform: scale(0.5); }
      50%  { opacity: var(--bright); }
      100% { opacity: calc(var(--bright) * 0.3); transform: scale(1.2); }
    }


.orb-fivehundred {
            width:500px;
            height:500px;
            background:#6b2fa0;
            top:-100px;
            left:-100px;
            --dur:11s;
            --dx:40px;
            --dy:30px;
}

.orb-fourhundred {
          width:400px;height:400px;
          background:#00d4c8;
          bottom:-80px;
          right:-80px;
          --dur:14s;
          --dx:-30px;
          --dy:-25px;
}

.orb-threehundred {
           width:300px;height:300px;
           background:#e84a8a;
           bottom:20%;
           left:10%;
           --dur:9s;
           --dx:25px;
           --dy:-20px;
}

.orb-threefifty {
          width:350px;
          height:350px;
          background:#1a3a80;
          top:20%;
          right:5%;
          --dur:13s;
          --dx:-20px;
          --dy:30px;
}

    /* Floating orbs */
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      animation: orbFloat var(--dur) ease-in-out infinite alternate;
      opacity: 0.18;
    }

    @keyframes orbFloat {
      0%   { transform: translate(0, 0) scale(1); }
      100% { transform: translate(var(--dx), var(--dy)) scale(2.15); 
      }
   }


    /* Dark overlay for readability */
    .video-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 40%, rgba(4,2,12,0.25) 0%, rgba(4,2,12,0.65) 100%);
    }

    /* ══════════════════════════════════════════
       SVG SWIRL FRAME BORDER
       To remove the frame, delete the .frame element
       and the .frame-corner elements below.
    ══════════════════════════════════════════ 
    .frame {
      position: fixed;
      inset: 0;
      z-index: 10;
      pointer-events: none;
    }

    .frame svg {
      width: 100%;
      height: 100%;
  }*/
.frame-container {
  position: fixed; 
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame-image {
  width: 100%;
  height: 100%;
  object-fit: fill; 
}
  /* ══════════════════════════════════════════
  @FONT FACES
   ══════════════════════════════════════════ */
}
@font-face {
  font-family: 'Cinzel';
  src: url(../fonty/Cinzel-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Cinzel Decorative';
  src: url(../fonty/CinzelDecorative-Black.woff2) format('woff2');
}

@font-face {
  font-family: 'IM Fell English';
  src: url(../fonty/IMFellEnglish-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'IM Fell English';
  src: url(../fonty/IMFellEnglish-Italic.woff2) format('woff2');

}    /* ══════════════════════════════════════════
       MAIN CONTENT
    ══════════════════════════════════════════ */
    .splash {
      position: relative;
      z-index: 5;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 2rem;
      text-align: center;
    }

    /* Top ornament */
    .ornament-top {
      font-family: 'Cinzel Decorative', serif;
      font-size: 28px;
      color: var(--gold);
      letter-spacing: 0.4em;
      margin-bottom: 1.2rem;
      opacity: 0.75;
      animation: fadeUp 1.5s ease forwards;
      animation-delay: 0.3s;
      opacity: 0;
    }

    /* Subtitle above title */
    .pre-title {
      font-family: 'IM Fell English', Georgia, serif;
      font-style: italic;
      font-size: clamp(15px, 2vw, 20px);
      color: var(--lavender);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 0.6s;
      opacity: 0;
    }
    #pink-title {  

      color: var(--lavender-lite); 
    }

    /* Main title */
    .main-title {
      font-family: 'Cinzel Decorative', serif;
     font-size: clamp(50px, 6vw, 83px);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: 0.04em;
      background: linear-gradient(135deg, #f5e4a0 0%, #e8c84a 30%, #ffffff 50%, #e8c84a 70%, #f5e4a0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 30px rgba(232,200,74,0.55));
      margin-bottom: 0.6rem;
      animation: fadeUp 1.4s ease forwards, titleGlow 4s ease-in-out infinite alternate;
      animation-delay: 0.9s, 2.3s;
      opacity: 0;
    }

    @keyframes titleGlow {
      0%   { filter: drop-shadow(0 0 22px rgba(232,200,74,0.45)); }
      100% { filter: drop-shadow(0 0 50px rgba(232,200,74,0.85)) drop-shadow(0 0 80px rgba(155,79,216,0.3)); }
    }

    /* Divider rule */
    .title-rule {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.2rem auto 0.6rem;
      width: min(500px, 80vw);
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.1s;
      opacity: 0;
    }

    .title-rule::before, .title-rule::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
    }

    .title-rule-gem {
      font-size: 20px;
      color: var(--gold);
      filter: drop-shadow(0 0 8px var(--gold-glow));
    }

    /* Tagline */
    .tagline {
      font-family: 'IM Fell English', Georgia, serif;
  /*  font-style:italic;*/
      font-size: clamp(30px, 3.2vw, 40px);
      color: rgba(200,158,255,0.88);
      letter-spacing: 0.08em;
      margin-top:1rem;
      margin-bottom: 3rem;
      max-width: 560px;
      line-height: 1.6;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.3s;
      opacity: 0;
    }

    /* ── Buttons ── */
    .button-row {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.6s;
      opacity: 0;
    }

    .mystic-btn {
      position: relative;
      font-family: 'Cinzel', serif;
      font-size: clamp(13px, 1.6vw, 16px);
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--gold-pale);
      padding: 14px 34px;
      border-radius: 50px;
      border: 1px solid rgba(232,200,74,0.4);
      background: rgba(11,5,32,0.6);
      backdrop-filter: blur(8px);
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      min-width: 200px;
    }

    /* Shimmer layer */
    .mystic-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
        transparent 30%,
        rgba(255,255,255,0.08) 50%,
        transparent 70%
      );
      transform: translateX(-100%);
      transition: transform 0.5s ease;
    }

    .mystic-btn:hover::before { transform: translateX(100%); }

    /* Glow border on hover */
    .mystic-btn::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50px;
      opacity: 0;
      transition: opacity 0.3s;
    }

   

    /* Button 2 — teal glow */
    .btn-teal {
      border-color: rgba(0,212,200,0.5);
      box-shadow: 0 0 18px rgba(0,212,200,0.12), inset 0 0 20px rgba(0,212,200,0.05);
      color: #a0f5f0;
    }
    .btn-teal::after { box-shadow: 0 0 0 2px var(--teal-glow), 0 0 35px rgba(0,255,238,0.5); }
    .btn-teal:hover  { background: rgba(0,212,200,0.12); color: #fff; }
    .btn-teal:hover::after, .btn-teal:active::after { opacity: 1; }
    .btn-teal:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 2px var(--teal-glow), 0 0 60px rgba(0,255,238,0.8), 0 0 120px rgba(0,255,238,0.4);
      background: rgba(0,212,200,0.2);
      color: #fff;
    }


    /* Bottom ornament */
    .ornament-bottom {
      margin-top: 3rem;
      font-family: 'Cinzel Decorative', serif;
      font-size: 18px;
      color: var(--amethyst);
      letter-spacing: 0.5em;
      opacity: 0.5;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 2s;
      opacity: 0;
    }

    @keyframes fadeUp {
      0%   { opacity: 0; transform: translateY(22px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Particle sparkles */
    .sparkle {
      position: fixed;
      pointer-events: none;
      border-radius: 50%;
      animation: sparkleFly var(--dur) ease-out forwards;
      z-index: 6;
    }

    @keyframes sparkleFly {
      0%   { transform: translate(0,0) scale(1); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
    }

    /* ── Floating Mandala ── */
    .mandala-wrap {
      position: fixed;
      z-index: 3;
      pointer-events: none;
      animation: mandalaFloat 38s ease-in-out infinite, mandalaDrift 60s linear infinite;
      opacity: 0;
      animation-fill-mode: forwards;
    }

    @keyframes mandalaFloat {
      0%   { opacity: 0;    transform: translateY(0px)    rotate(0deg); }
      8%   { opacity: 0.62; }
      50%  { opacity: 0.55; transform: translateY(-28px)  rotate(180deg); }
      92%  { opacity: 0.62; }
      100% { opacity: 0;    transform: translateY(0px)    rotate(360deg); }
    }

    @keyframes mandalaDrift {
      0%   { left: 8vw;  top: 55vh; }
      25%  { left: 72vw; top: 20vh; }
      50%  { left: 80vw; top: 65vh; }
      75%  { left: 20vw; top: 75vh; }
      100% { left: 8vw;  top: 55vh; }
    }

    .mandala-wrap svg {
      width: 220px;
      height: 220px;
      filter: drop-shadow(0 0 22px rgba(155,79,216,0.80))
              drop-shadow(0 0 45px rgba(232,200,74,0.50))
              drop-shadow(0 0 8px  rgba(200,158,255,0.60));
    }

    @media (max-width: 600px) {
      .splash { padding: 2rem 1.25rem; }
      .ornament-top { font-size: 20px; margin-bottom: 0.8rem; }
      .tagline { margin-bottom: 2rem; }
      .button-row { flex-direction: column; align-items: center; }
      .mystic-btn { min-width: 240px; }
      .ornament-bottom { margin-top: 2rem; }
    }

    /* Short / landscape viewports — the height-based clamp keeps the
       title and tagline from ballooning when there isn't much vertical
       room, so nothing gets pushed off the top or bottom. */
    @media (max-height: 700px) {
      .splash { padding: 1.5rem 2rem; }
      .ornament-top { margin-bottom: 0.6rem; }
      .pre-title { margin-bottom: 0.8rem; }
      .main-title { font-size: clamp(36px, 8vh, 83px); margin-bottom: 0.4rem; }
      .tagline { font-size: clamp(20px, 3.2vh, 30px); margin-bottom: 1.5rem; }
      .ornament-bottom { margin-top: 1.5rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; }
    }