/* Radiant Life cinematic homepage entrance | V5 */
:root{
  --intro-ink:#06141A;
  --intro-ink-deep:#020B10;
  --intro-ivory:#F7F3EA;
  --intro-cyan:#5FD7FF;
  --intro-blue:#20BFF2;
  --intro-gold:#F2C96E;
  --intro-ease:cubic-bezier(.16,1,.3,1);
}

html.intro-lock, body.intro-lock{overflow:hidden;}

.radiant-intro{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  color:var(--intro-ivory);
  background:
    radial-gradient(900px 620px at 18% 24%,rgba(32,191,242,.13),transparent 68%),
    radial-gradient(760px 560px at 82% 76%,rgba(242,201,110,.08),transparent 70%),
    linear-gradient(145deg,var(--intro-ink-deep) 0%,var(--intro-ink) 52%,#071A23 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .72s var(--intro-ease),visibility .72s step-end;
}
.radiant-intro::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-2;
  background:
    conic-gradient(from 210deg at 50% 50%,transparent 0 24%,rgba(95,215,255,.05) 31%,transparent 39% 67%,rgba(242,201,110,.035) 74%,transparent 82%);
  filter:blur(22px);
  animation:introAura 5s linear infinite;
}
.radiant-intro::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(circle at center,#000 0 18%,transparent 70%);
  opacity:.34;
}
.radiant-intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none;}
.radiant-intro.is-hidden{display:none;}

.intro-stage{
  position:relative;
  width:min(920px,92vw);
  height:min(390px,50vh);
  display:grid;
  place-items:center;
  text-align:center;
  perspective:1000px;
}
.intro-word{
  position:absolute;
  inset:auto 0;
  margin:auto;
  font-family:inherit;
  font-weight:900;
  font-size:clamp(54px,9vw,132px);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase;
  opacity:0;
  transform:translate3d(0,34px,0) scale(.965);
  filter:blur(16px);
  text-shadow:0 0 38px rgba(95,215,255,.10);
  will-change:opacity,transform,filter;
}
.intro-word[data-word="love"]{animation:introWord .72s var(--intro-ease) .10s both;color:var(--intro-ivory);}
.intro-word[data-word="reach"]{animation:introWord .72s var(--intro-ease) .76s both;color:var(--intro-cyan);}
.intro-word[data-word="serve"]{animation:introWord .72s var(--intro-ease) 1.42s both;color:var(--intro-ivory);}

.intro-brand{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  opacity:0;
  transform:translateY(18px) scale(.975);
  filter:blur(13px);
  animation:introBrand 1.25s var(--intro-ease) 2.04s both;
}
.intro-logo-wrap{
  position:relative;
  width:clamp(82px,8vw,116px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.intro-logo-wrap::before,
.intro-logo-wrap::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.intro-logo-wrap::before{
  inset:-15px;
  border:1px solid rgba(95,215,255,.28);
  box-shadow:0 0 55px rgba(95,215,255,.18),inset 0 0 28px rgba(242,201,110,.06);
  animation:introRing 1.9s ease-in-out 2.06s both;
}
.intro-logo-wrap::after{
  inset:-31px;
  border:1px solid rgba(242,201,110,.13);
  opacity:.75;
  animation:introRing 2.2s ease-in-out 2.1s both;
}
.intro-logo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 18px 54px rgba(0,0,0,.40),0 0 28px rgba(242,201,110,.15);
}
.intro-brand-name{
  font-size:clamp(28px,4.1vw,58px);
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--intro-ivory);
  text-shadow:0 0 28px rgba(95,215,255,.14);
}
.intro-brand-name span{color:var(--intro-cyan);}
.intro-brand-rule{
  width:min(340px,54vw);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,215,255,.75),rgba(242,201,110,.72),transparent);
  transform:scaleX(0);
  transform-origin:center;
  animation:introRule .86s var(--intro-ease) 2.48s forwards;
}
.intro-tagline{
  font-size:clamp(10px,1.2vw,14px);
  font-weight:800;
  letter-spacing:.27em;
  text-transform:uppercase;
  color:rgba(247,243,234,.72);
}
.intro-glow{
  position:absolute;
  width:min(560px,72vw);
  height:170px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(95,215,255,.16),rgba(95,215,255,.03) 44%,transparent 72%);
  filter:blur(24px);
  opacity:0;
  animation:introGlow 1.5s ease 2.0s both;
  pointer-events:none;
}

@keyframes introWord{
  0%{opacity:0;transform:translate3d(0,34px,0) scale(.965);filter:blur(16px);}
  25%{opacity:1;filter:blur(0);}
  65%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);}
  100%{opacity:0;transform:translate3d(0,-22px,0) scale(1.025);filter:blur(10px);}
}
@keyframes introBrand{
  0%{opacity:0;transform:translateY(18px) scale(.975);filter:blur(13px);}
  36%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}
@keyframes introRing{
  0%{opacity:0;transform:scale(.72);}
  50%{opacity:1;}
  100%{opacity:.56;transform:scale(1);}
}
@keyframes introRule{to{transform:scaleX(1);}}
@keyframes introGlow{0%{opacity:0;transform:scale(.72);}100%{opacity:1;transform:scale(1);}}
@keyframes introAura{to{transform:rotate(360deg);}}

@media(max-width:700px){
  .intro-stage{height:360px;}
  .intro-word{font-size:clamp(48px,17vw,82px);}
  .intro-brand-name{font-size:clamp(25px,8vw,38px);}
  .intro-tagline{font-size:9px;letter-spacing:.20em;}
}

@media(prefers-reduced-motion:reduce){
  .radiant-intro::before{animation:none;}
  .intro-word{display:none;}
  .intro-brand{animation:none;opacity:1;transform:none;filter:none;}
  .intro-logo-wrap::before,.intro-logo-wrap::after,.intro-brand-rule,.intro-glow{animation:none;}
  .intro-brand-rule{transform:scaleX(1);}
  .intro-glow{opacity:.55;}
}