/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

:root{
  --academy-banner-height:clamp(520px,80vh,780px);
  --academy-banner-subtitle-size:clamp(17px,1.35vw,22px);
}

@supports(height:100svh){
  :root{--academy-banner-height:clamp(520px,80svh,780px)}
}

.academy-index .academy-hero-banner{
  height:var(--academy-banner-height);
  min-height:var(--academy-banner-height);
}

.academy-index .academy-hero-banner--content{height:auto}

.academy-alive-wave{
  display:inline-flex;
  color:#e9fff9;
  white-space:nowrap;
  text-shadow:0 0 12px rgba(94,228,208,.24);
}

.academy-alive-wave>span{
  display:inline-block;
  transform-origin:50% 80%;
  animation:academy-alive-wave 3.2s cubic-bezier(.22,1,.36,1) infinite;
}

.academy-alive-wave>span:nth-child(2){animation-delay:.08s}
.academy-alive-wave>span:nth-child(3){animation-delay:.16s}
.academy-alive-wave>span:nth-child(4){animation-delay:.24s}
.academy-alive-wave>span:nth-child(5){animation-delay:.32s}

@keyframes academy-alive-wave{
  0%,28%,100%{transform:translateY(0) scaleY(1);color:#e9fff9;text-shadow:0 0 12px rgba(94,228,208,.24)}
  10%{transform:translateY(-.18em) scaleY(1.04);color:#72f2df;text-shadow:0 0 16px rgba(94,228,208,.58)}
  18%{transform:translateY(.04em) scaleY(.98)}
}

@media (prefers-reduced-motion:reduce){
  .academy-alive-wave>span{animation:none}
}

.academy-feature-banners{
  background:#05060d;
  border-bottom:1px solid var(--academy-line);
}

.academy-feature-banner{
  --feature-accent:#e8c89a;
  --feature-title-size:clamp(72px,10vw,168px);
  --feature-gutter:clamp(24px,6vw,104px);
  position:relative;
  height:var(--academy-banner-height);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);
  align-items:center;
  padding:clamp(48px,7vw,108px) var(--feature-gutter);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(232,200,154,.22);
  color:#f4efe7;
  background:#05060d;
}

.academy-feature-banner:last-child{border-bottom:0}

.academy-feature-banner__canvas,
.academy-feature-banner__fallback,
.academy-feature-banner__veil{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.academy-feature-banner__canvas{
  z-index:-4;
  display:block;
  opacity:0;
  transition:opacity .7s ease;
}

.academy-feature-banner[data-renderer="webgpu"] .academy-feature-banner__canvas,
.academy-feature-banner[data-renderer="webgl2"] .academy-feature-banner__canvas,
.academy-feature-banner[data-renderer="canvas2d"] .academy-feature-banner__canvas,
.academy-feature-banner__canvas[data-renderer="webgpu"]{opacity:1}

.academy-feature-banner__fallback{
  z-index:-5;
  background:
    radial-gradient(80% 120% at 22% 42%,rgba(103,45,191,.7),transparent 66%),
    radial-gradient(70% 100% at 78% 62%,rgba(24,128,182,.3),transparent 72%),
    linear-gradient(125deg,#09051b,#080a19 55%,#02040a);
}

.academy-feature-banner__veil{
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(4,4,12,.82) 0%,rgba(4,4,12,.32) 48%,rgba(4,4,12,.62) 100%),
    linear-gradient(0deg,rgba(3,4,10,.74),transparent 62%);
}

.academy-feature-banner__copy{
  position:relative;
  z-index:2;
  max-width:820px;
}

.academy-feature-banner__kicker{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--feature-accent);
  font:600 10px/1.35 var(--font-mono);
  letter-spacing:.19em;
  text-transform:uppercase;
}

.academy-feature-banner__kicker::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 15px currentColor;
}

.academy-feature-banner__kicker--live{color:#67ead7}

.academy-feature-banner h2{
  margin:25px 0 19px;
  color:#f4efe7;
  font:300 var(--feature-title-size)/.8 Outfit,sans-serif;
  letter-spacing:-.068em;
  text-wrap:balance;
}

.academy-feature-banner h2 em{
  color:var(--feature-accent);
  font-style:normal;
  font-weight:300;
}

.academy-feature-banner__subtitle{
  max-width:38ch;
  margin:0;
  color:rgba(244,239,231,.8);
  font:300 var(--academy-banner-subtitle-size)/1.45 Outfit,sans-serif;
}

.academy-feature-banner__action{
  display:inline-flex;
  align-items:center;
  gap:14px;
  width:max-content;
  margin-top:34px;
  padding:0 0 10px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--feature-accent) 72%,transparent);
  background:transparent;
  color:var(--feature-accent);
  cursor:pointer;
  text-decoration:none;
  font:600 11px/1 var(--font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:gap .28s ease,color .28s ease,border-color .28s ease;
}

.academy-feature-banner__action:hover{
  gap:22px;
  color:#fff4dc;
  border-color:#fff4dc;
}

.academy-feature-banner__action:focus-visible{
  outline:1px solid var(--feature-accent);
  outline-offset:8px;
}

.academy-feature-banner__action[aria-disabled="true"]{
  color:rgba(244,239,231,.72);
  border-color:rgba(244,239,231,.34);
  cursor:default;
}

.academy-feature-banner__action[aria-disabled="true"]:hover{gap:14px}

.academy-feature-banner__world-links{
  width:min(100%,520px);
  margin-top:clamp(28px,4vw,44px);
  justify-content:flex-start;
}

.academy-feature-banner__world-links button{
  flex:1 1 calc(50% - 9px);
  text-align:left;
}

.academy-feature-banner--foundations{--feature-accent:#67ead7}
.academy-feature-banner--foundations .academy-feature-banner__fallback{
  background:
    radial-gradient(75% 105% at 25% 55%,rgba(139,55,225,.76),transparent 64%),
    radial-gradient(65% 100% at 78% 42%,rgba(32,93,188,.38),transparent 72%),
    #03050d;
}

.academy-feature-banner--foundations .academy-feature-banner__veil{
  background:
    radial-gradient(ellipse at 52% 36%,transparent 34%,rgba(2,3,12,.025) 76%,rgba(2,3,10,.18) 100%),
    linear-gradient(180deg,rgba(3,4,14,0),rgba(4,5,16,.015) 48%,rgba(4,5,12,.32) 100%);
}

.academy-feature-banner--foundations .academy-feature-banner__canvas{
  filter:none;
}

.academy-feature-banner--foundations .academy-feature-banner__canvas--aurora{
  z-index:-4;
  filter:brightness(1.14) contrast(1.38) saturate(1.22);
}

.academy-feature-banner--portals{
  --feature-accent:#e8c89a;
  grid-template-columns:minmax(330px,.72fr) minmax(0,1fr);
  background-color:#010207;
}

.academy-feature-banner--portals .academy-feature-banner__canvas--portals{
  z-index:0;
}

.academy-feature-banner--portals .academy-feature-banner__copy{
  grid-column:2;
  align-self:center;
  justify-self:end;
  width:min(100%,760px);
  text-align:right;
}

.academy-feature-banner--portals .academy-feature-banner__kicker{justify-content:flex-end}
.academy-feature-banner--portals .academy-feature-banner__subtitle{margin-left:auto}

.academy-feature-banner__portals-separator{color:rgba(103,234,215,.48)}

.academy-feature-banner__portals-region{
  min-width:9ch;
  color:#e8c89a;
  text-align:left;
}

.academy-feature-banner__portals-flag{
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.academy-feature-banner__portals-flag i{
  width:15px;
  height:2px;
  border-radius:999px;
  box-shadow:0 0 7px currentColor;
  transition:background-color .32s ease,color .32s ease;
}

.academy-feature-banner h2.academy-feature-banner__portals-title{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  white-space:nowrap;
}

.academy-feature-banner__portals-oval{
  display:inline-block;
  flex:0 0 .57em;
  width:.57em;
  height:.75em;
  margin:0 .015em -.075em .045em;
  box-sizing:border-box;
  border:1px solid rgba(232,200,154,.62);
  border-radius:50%;
  background:radial-gradient(ellipse at 38% 34%,rgba(232,200,154,.22),rgba(67,35,92,.32) 38%,rgba(2,5,12,.94) 76%);
  box-shadow:0 0 .18em rgba(196,145,255,.38);
  vertical-align:-.075em;
}

.academy-feature-banner__portals-oval[data-renderer="canvas2d"]{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.academy-feature-banner--shaderlab{
  --feature-accent:#8feaff;
  background:#000105;
}

.academy-feature-banner--shaderlab .academy-feature-banner__canvas{z-index:0}

@media (max-width:900px){
  .academy-feature-banner,
  .academy-feature-banner--portals{
    grid-template-columns:1fr;
    align-items:center;
  }
  .academy-feature-banner--portals .academy-feature-banner__copy{
    grid-column:1;
    justify-self:end;
  }
  .academy-feature-banner__veil,
  .academy-feature-banner--portals .academy-feature-banner__veil{
    background:linear-gradient(0deg,rgba(3,4,11,.9) 0%,rgba(3,4,11,.3) 72%,rgba(3,4,11,.48));
  }
}

@media (max-width:620px){
  :root{--academy-banner-subtitle-size:clamp(15px,4.2vw,17px)}
  .academy-feature-banner{
    --feature-title-size:clamp(50px,14vw,72px);
    align-items:start;
    padding:clamp(52px,8svh,72px) 20px 42px;
  }
  .academy-feature-banner--portals{
    --feature-title-size:clamp(64px,18vw,92px);
  }
  .academy-feature-banner--shaderlab{
    --feature-title-size:clamp(56px,15.5vw,82px);
  }
  .academy-feature-banner .academy-feature-banner__copy,
  .academy-feature-banner--portals .academy-feature-banner__copy{
    align-self:end;
  }
  .academy-feature-banner--portals .academy-feature-banner__copy{
    justify-self:end;
  }
  .academy-feature-banner__portals-region{min-width:0}
  .academy-feature-banner__portals-flag i{width:10px}
  .academy-feature-banner__world-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 16px;
    margin-top:30px;
  }
}

@media (prefers-reduced-motion:reduce){
  .academy-feature-banner__canvas{transition:none}
}