/* ============================================================
   RIALESA ULTRA CINEMATIC INTRO
   ============================================================ */
.ultra-intro{
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(8,36,52,.92),transparent 30%),
    radial-gradient(circle at 50% 120%,rgba(205,165,86,.18),transparent 44%),
    linear-gradient(180deg,#010407 0%,#05121c 54%,#010305 100%);
  perspective:1800px;
  transform-style:preserve-3d;
  opacity:1;
  visibility:visible;
  transition:opacity 1.15s cubic-bezier(.22,1,.36,1),visibility 1.15s;
}
.ultra-intro.cinematic-finished{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.rialesa-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.ultra-vignette{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  box-shadow:inset 0 0 180px 60px rgba(0,0,0,.78);
}
.ultra-stars{
  position:absolute;
  inset:-25%;
  z-index:0;
  opacity:.42;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(218,184,113,.85) 0 1px,transparent 1.6px);
}
.ultra-stars-a{
  background-size:70px 70px,119px 119px;
  animation:ultraStarsA 18s linear infinite;
}
.ultra-stars-b{
  background-size:41px 41px,83px 83px;
  opacity:.22;
  animation:ultraStarsB 24s linear infinite reverse;
}
@keyframes ultraStarsA{to{transform:translate3d(-90px,48px,-100px) scale(1.08)}}
@keyframes ultraStarsB{to{transform:translate3d(70px,-36px,-180px) scale(1.15)}}

.ultra-beam{
  position:absolute;
  top:-22%;
  width:22vw;
  height:145vh;
  z-index:2;
  filter:blur(16px);
  opacity:0;
  transform-origin:top center;
  background:linear-gradient(180deg,rgba(255,243,194,.9),rgba(197,157,82,.18) 38%,transparent 78%);
}
.ultra-beam-1{left:12%;animation:beamOne 6.8s ease-in-out infinite}
.ultra-beam-2{right:11%;animation:beamTwo 7.2s ease-in-out infinite .4s}
.ultra-beam-3{left:42%;width:14vw;animation:beamThree 5.8s ease-in-out infinite 1.2s}
@keyframes beamOne{
  0%,100%{opacity:.04;transform:rotate(34deg)}
  44%{opacity:.25;transform:rotate(18deg)}
}
@keyframes beamTwo{
  0%,100%{opacity:.05;transform:rotate(-34deg)}
  50%{opacity:.24;transform:rotate(-16deg)}
}
@keyframes beamThree{
  0%,100%{opacity:0;transform:rotate(8deg)}
  40%{opacity:.12;transform:rotate(-8deg)}
}

.ultra-ring{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  border:1px solid rgba(222,186,108,.28);
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(72deg);
  box-shadow:0 0 28px rgba(202,162,83,.18);
}
.ultra-ring-1{width:42vw;height:42vw;animation:ringSpin 9s linear infinite}
.ultra-ring-2{width:58vw;height:58vw;animation:ringSpinReverse 13s linear infinite}
.ultra-ring-3{width:76vw;height:76vw;opacity:.12;animation:ringPulse 4s ease-in-out infinite}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg)}}
@keyframes ringSpinReverse{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(-360deg)}}
@keyframes ringPulse{50%{opacity:.26;scale:1.05}}

.ultra-stage{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  display:grid;
  justify-items:center;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%);
}
.ultra-logo-shell{
  position:relative;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  opacity:0;
  transform:translate3d(0,120px,-1600px) rotateX(28deg) rotateY(-22deg) scale(.08);
  animation:logoEpicEntrance 5.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes logoEpicEntrance{
  0%{
    opacity:0;
    transform:translate3d(0,150px,-1800px) rotateX(34deg) rotateY(-30deg) scale(.06);
    filter:blur(28px) brightness(.35);
  }
  22%{
    opacity:1;
    filter:blur(14px) brightness(.62);
  }
  45%{
    transform:translate3d(0,30px,-280px) rotateX(8deg) rotateY(8deg) scale(.72);
    filter:blur(2px) brightness(.9);
  }
  66%{
    transform:translate3d(0,-10px,140px) rotateX(-2deg) rotateY(-3deg) scale(1.18);
    filter:blur(0) brightness(1.32);
  }
  79%{
    transform:translate3d(0,0,60px) rotateX(1deg) rotateY(1deg) scale(.96);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);
    filter:blur(0) brightness(1);
  }
}
.ultra-logo{
  display:block;
  width:min(620px,72vw);
  max-height:290px;
  object-fit:contain;
  filter:
    drop-shadow(0 28px 36px rgba(0,0,0,.62))
    drop-shadow(0 0 28px rgba(0,185,198,.40))
    drop-shadow(0 0 72px rgba(203,165,88,.30));
  animation:logoBreath 2.6s ease-in-out 4.5s infinite alternate;
}
@keyframes logoBreath{
  to{
    transform:translateZ(28px) scale(1.025);
    filter:
      drop-shadow(0 34px 42px rgba(0,0,0,.68))
      drop-shadow(0 0 42px rgba(0,185,198,.52))
      drop-shadow(0 0 96px rgba(203,165,88,.40));
  }
}
.ultra-logo-backglow{
  position:absolute;
  width:118%;
  aspect-ratio:1.8;
  border-radius:50%;
  z-index:-1;
  background:
    radial-gradient(ellipse,rgba(0,184,197,.34),rgba(202,160,78,.12) 38%,transparent 72%);
  filter:blur(34px);
  animation:backGlow 3s ease-in-out infinite alternate;
}
@keyframes backGlow{to{transform:scale(1.14);opacity:.72}}
.ultra-logo-reflection{
  position:absolute;
  top:100%;
  width:92%;
  height:90px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
  transform:rotateX(76deg) translateY(-12px);
  filter:blur(8px);
  opacity:.22;
}

.ultra-tagline,
.ultra-domain{
  opacity:0;
  transform:translateY(22px);
  text-transform:uppercase;
}
.ultra-tagline{
  margin-top:18px;
  color:rgba(255,255,255,.82);
  font:400 clamp(10px,1vw,14px)/1.2 Arial,sans-serif;
  letter-spacing:.34em;
  text-indent:.34em;
  animation:textReveal .9s ease 3.3s forwards;
}
.ultra-domain{
  margin-top:12px;
  color:#d8b76f;
  font:600 clamp(14px,1.3vw,19px)/1.2 Arial,sans-serif;
  letter-spacing:.48em;
  text-indent:.48em;
  text-shadow:0 0 20px rgba(216,183,111,.48);
  animation:textReveal 1s ease 3.8s forwards;
}
@keyframes textReveal{to{opacity:1;transform:none}}

.ultra-flare{
  position:absolute;
  z-index:7;
  top:50%;
  height:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,#fff9dd,#d7af59,transparent);
  box-shadow:0 0 18px rgba(255,248,213,.95),0 0 54px rgba(211,170,82,.72);
}
.ultra-flare-main{
  left:-40%;
  width:46%;
  animation:flareMain 1.6s ease 2.8s forwards;
}
.ultra-flare-secondary{
  right:-35%;
  width:34%;
  top:54%;
  animation:flareSecondary 1.4s ease 3.35s forwards;
}
@keyframes flareMain{
  0%{left:-40%;opacity:0}
  25%{opacity:1}
  100%{left:115%;opacity:0}
}
@keyframes flareSecondary{
  0%{right:-35%;opacity:0}
  28%{opacity:.9}
  100%{right:112%;opacity:0}
}
.ultra-shockwave{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:120px;
  height:120px;
  border:2px solid rgba(255,245,205,.75);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.2);
  box-shadow:0 0 28px rgba(255,244,195,.62),inset 0 0 28px rgba(255,244,195,.25);
  animation:shockwave 1.8s cubic-bezier(.16,1,.3,1) 3.05s forwards;
}
@keyframes shockwave{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  20%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-50%) scale(8)}
}

.ultra-skip{
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:9;
  transform:translateX(-50%);
  color:rgba(255,255,255,.52);
  font:500 9px/1.2 Arial,sans-serif;
  letter-spacing:.22em;
  opacity:0;
  animation:skipIn .8s ease 1.4s forwards;
}
@keyframes skipIn{to{opacity:1}}

body.cinematic-intro-active{overflow:hidden!important}

@media(max-width:700px){
  .ultra-logo{width:min(410px,80vw)}
  .ultra-tagline{font-size:9px;letter-spacing:.22em;text-indent:.22em}
  .ultra-domain{font-size:12px;letter-spacing:.30em;text-indent:.30em}
  .ultra-ring-1{width:70vw;height:70vw}
  .ultra-ring-2{width:92vw;height:92vw}
  .ultra-ring-3{width:120vw;height:120vw}
}
@media(prefers-reduced-motion:reduce){
  .ultra-intro{display:none!important}
}