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

    :root {
      --void:       #04020c;
      --deep:       #0b0520;
      --amethyst:   #6b2fa0;
      --violet:     #9b4fd8;
      --lavender:   #c89eff;
       --lavender-lite:#d287fb;
      --gold:       #e8c84a;
      --gold-pale:  #f5e4a0;
      --gold-glow:  #ffda00;
      --teal:       #00d4c8;
      --teal-glow:  #00ffee;
      --rose:       #e84a8a;
      --rose-glow:  #ff6aaa;
      --star:       rgba(255,255,255,0.85);
      --frame-gold: #c8a030;

      --purple:#6D28D9;
      --pink:#EC4899;
      --blue:#3B82F6;

      --bg0:#070a14;
      --bg1:#0b1020;
      --card: rgba(255,255,255,.08);
      --border: rgba(255,255,255,.16);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius:18px;
    }

    html, body {
      width: 100%;
     height:100%;
     
      background: var(--void);
     
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:24px;

        }  


  /* ══════════════════════════════════════════
  @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');

}

@font-face {
  font-family: 'Dancing Script';
  src: url(../fonty/DancingScript-Bold.woff2) format('woff2');
}

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

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

    /*
      VIDEO PLACEHOLDER
      Replace the placeholder div below with:
      <video autoplay muted loop playsinline style="width:100%;height:100%;object-fit:cover;opacity:0.6;">
        <source src="your-mystical-video.mp4" type="video/mp4" />
      </video>
    */
    .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); }
    }

    /* 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(1.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%;
    }



/* ══════════════════════════════════════════
       MAIN CONTENT
    ══════════════════════════════════════════ */
    .splash {
      position: relative;
       width: 100%;
      inset: 0;
      z-index: 5;
      overflow-y: visible;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /*  padding: 1rem 1rem; */
      text-align: center;
    }
.signature {
  font-family: 'Dancing Script', cursive;

  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding-bottom: 5px;
  text-align: left;
  font-size: clamp(34px, 4.5vw, 50px);
}

    /* 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); 
    }

    .green-text {  

      color: #acf18c; 
    }


    .teal-text {  

      color: var(--teal)!important;  
    }
    /* Main title 
    .main-title-green {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(32px, 6vw, 60px);
      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)); }
    }*/

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

@keyframes titleGlowGreen {
  0%   { filter: drop-shadow(0 0 22px rgba(118,217,111,0.45)); }
  100% { filter: drop-shadow(0 0 50px rgba(118,217,111,0.85)) drop-shadow(0 0 80px rgba(0, 176, 80, 0.28)); }
}

    /* 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));
    }


    /* Divider rule */
    .title-hello {
      display: flex;
      font-size: 24px;
      font-style: italic;
      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-hello::before, .title-rule::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
    }
    /* Tagline */
    .tagline {
      font-family: 'IM Fell English', Georgia, serif;
  /*  font-style:italic;*/
      font-size: clamp(25px, 2.2vw, 30px);
      color: rgba(200,158,255,0.88);
      letter-spacing: 0.08em;
      margin-top:1rem;
      margin-bottom: 1rem;
      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: 900;
      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 1 — gold glow */
    .btn-gold {
      border-color: rgba(232,200,74,0.5);
      box-shadow: 0 0 18px rgba(232,200,74,0.12), inset 0 0 20px rgba(232,200,74,0.05);
    }
    .btn-gold::after { box-shadow: 0 0 0 2px var(--gold-glow), 0 0 35px rgba(255,218,0,0.5); }
    .btn-gold:hover  { background: rgba(232,200,74,0.12); color: #fff; }
    .btn-gold:hover::after, .btn-gold:active::after { opacity: 1; }
    .btn-gold:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 2px var(--gold-glow), 0 0 60px rgba(255,218,0,0.8), 0 0 120px rgba(255,218,0,0.4);
      background: rgba(232,200,74,0.2);
      color: #fff;
    }

    /* 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;
    }

    /* Button 3 — rose glow */
    .btn-rose {
      border-color: rgba(232,74,138,0.5);
      box-shadow: 0 0 18px rgba(232,74,138,0.12), inset 0 0 20px rgba(232,74,138,0.05);
      color: #ffb0d0;
    }
    .btn-rose::after { box-shadow: 0 0 0 2px var(--rose-glow), 0 0 35px rgba(255,106,170,0.5); }
    .btn-rose:hover  { background: rgba(232,74,138,0.12); color: #fff; }
    .btn-rose:hover::after, .btn-rose:active::after { opacity: 1; }
    .btn-rose:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 2px var(--rose-glow), 0 0 60px rgba(255,106,170,0.8), 0 0 120px rgba(255,106,170,0.4);
      background: rgba(232,74,138,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) {
      .button-row { flex-direction: column; align-items: center; }
      .mystic-btn { min-width: 240px; }
    }

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


    .card{
      width:min(560px, 100%);
      background: var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(10px);
    }

    .card-header{
      padding:18px 20px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(90deg, rgba(109,40,217,.20), rgba(236,72,153,.20), rgba(59,130,246,.20));
    }

    .title{
      margin:0;
      font-size:30px;
      letter-spacing:.2px;
      font-style: italic;
    }

    .subtitle{
      margin:6px 0 0;
      color: var(--muted);
      font-size:16px;
      line-height:1.4;

    }

    form{
      padding:20px;
      display:grid;
      gap:14px;
    }

    .row{
      display:grid;
      gap:8px;
    }

    label{
      font-size:18px;
      color: var(--muted);
    }

    input{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      color: var(--text);
      outline:none;
      transition: box-shadow .15s ease, border-color .15s ease;
    }

    input::placeholder{ color: rgba(255,255,255,.45); }

    input:focus{
      border-color: rgba(236,72,153,.55);
      box-shadow: 0 0 0 4px rgba(236,72,153,.18);
    }

    .btn{
      border:0;
      border-radius:14px;
      padding:12px 14px;
      color:#000;
      font-size:18px;
      font-weight:800;
      cursor:pointer;
      background: linear-gradient(90deg, var(--purple), var(--pink), var(--blue));
      box-shadow: 0 14px 35px rgba(109,40,217,.25);
      transition: transform .12s ease, filter .12s ease, opacity .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    .btn:active{ transform: translateY(0px); }
    .btn[disabled]{ cursor:not-allowed; opacity:.72; transform:none; filter:none; }

    .hint{
      font-size:12px;
      color: var(--muted);
      line-height:1.4;
      margin-top:-6px;
      min-height: 1px;
    }

    .error{
      font-size:13px;
      color: rgba(255,255,255,.93);
      background: rgba(236,72,153,.12);
      border: 1px solid rgba(236,72,153,.35);
      border-radius: 12px;
      padding: 10px 12px;
      display:none;
    }
    .error.show{ display:block; 
    }
 .content-box{
    width: min(860px, 92vw);
    margin: 20px auto;
    padding: clamp(14px, 2.2vw, 18px);
    border-radius: var(--radius);
    background: var(--glass);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

.image-text-wrapp {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  
  /* Pushes text down on desktop; Top: 200px, Right: 10%, Bottom: 150px, Left: 10% */
  padding: 200px 10% 150px 10%; 

  /* Ensures the container is at least full screen and grows with your text */
  min-height: 100vh; 
  
  /* ADDED BACK: This is the line that triggers the animation */
  animation: scrollUnroll 5s ease-out forwards;

  background-image: url('../img-MAIN/Secret-Scroll-2.png');
  background-size: cover; 
  background-position: center top; 
  background-repeat: no-repeat;
  overflow: visible;
  border: 0px solid var(--teal-glow);
}

.overlay-textp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; 
  padding: 50px 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  word-wrap: break-word;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Felipa', Georgia, serif;
  font-size: clamp(22px, 4vw, 48px);
  color: #000;
  cursor: default;
  gap: 0.5em;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

@keyframes scrollUnroll {
  0% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
  }
  25% {
    opacity: 1;
    clip-path: inset(0 0 90% 0);
  }
  50% {
    opacity: 1;
    clip-path: inset(0 0 90% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* --- Tablet View --- */
@media (max-width: 1024px) {
  .image-text-wrapp {
    padding: 100px 5% 100px 5%;
  }
}

/* --- Mobile View --- */
@media (max-width: 768px) {
  .image-text-wrapp {
    width: 95%;
    padding: 60px 10px; 
    background-size: 100% 100%;
    box-shadow: inset 15px 0 20px rgba(139, 90, 43, 0.7), inset -15px 0 20px rgba(139, 90, 43, 0.7);
    margin: 0 auto;
    /* Ensure animation still runs on mobile */
    animation: scrollUnroll 10s ease-out forwards;
  }

  .overlay-textp {
    width: 90%;
    max-width: 650px;
    font-size: clamp(20px, 5vw, 30px);
    padding: 40px 15px;
    margin-top: 20px; 
  }
}

/* --- Small Mobile View --- */
@media (max-width: 480px) {
  .image-text-wrapp {
    padding: 45px 5px; 
    box-shadow: inset 10px 0 15px rgba(139, 90, 43, 0.7), inset -10px 0 15px rgba(139, 90, 43, 0.7);
  }

  .overlay-textp {
    width: 95%;
    max-width: 350px;
    font-size: clamp(18px, 5vw, 24px);
    padding: 50px 8px;
  }
}