/* ================================================================
   STUDI V5 — FINAL VISUAL POLISH
   More alive, still calm: spotlight, glints, arcs, stagger, magnetic depth.
   ================================================================ */

/* Correct descenders in English words such as "progress". */
.gate-showcase h1,
#p-index .hero h1{
  line-height:1.015!important;
  padding-bottom:.10em!important;
  overflow:visible!important;
}
html[lang="en"] .gate-showcase h1,
html[lang="en"] #p-index .hero h1{
  line-height:1.04!important;
  padding-bottom:.14em!important;
}
.gate-showcase h1 em,
#p-index .hero h1 em{padding-bottom:.04em}

/* ---------------- HOME HERO ---------------- */
#p-index .hero{
  --spot-x:72%;
  --spot-y:26%;
}
#p-index .hero .studi-motion-field:before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle 260px at var(--spot-x) var(--spot-y),
      rgba(205,249,139,.10),
      rgba(205,249,139,.045) 34%,
      transparent 70%);
  transition:opacity .25s ease;
}
#p-index .motion-grid{
  animation:v5GridDrift 34s linear infinite!important;
}
@keyframes v5GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:58px 58px,-58px 58px}
}

#p-index .motion-arc{
  position:absolute;
  border:1px solid rgba(221,247,205,.12);
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
}
#p-index .arc-one{
  width:430px;height:430px;
  right:-112px;top:64px;
  border-left-color:rgba(185,236,107,.32);
  border-top-color:rgba(185,236,107,.07);
  animation:v5ArcOne 26s linear infinite;
}
#p-index .arc-two{
  width:290px;height:290px;
  right:22%;bottom:-132px;
  border-right-color:rgba(181,163,229,.20);
  border-bottom-color:rgba(238,185,142,.16);
  animation:v5ArcTwo 31s linear infinite reverse;
}
@keyframes v5ArcOne{
  to{transform:rotate(360deg) translateZ(0)}
}
@keyframes v5ArcTwo{
  to{transform:rotate(360deg) translateZ(0)}
}

#p-index .motion-stars i{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:#d9f6a8;
  box-shadow:0 0 14px rgba(185,236,107,.45);
  opacity:.0;
  animation:v5Star 7s ease-in-out infinite;
}
#p-index .motion-stars i:nth-child(1){right:10%;top:18%;animation-delay:-1s}
#p-index .motion-stars i:nth-child(2){right:26%;top:32%;animation-delay:-4s;width:2px;height:2px}
#p-index .motion-stars i:nth-child(3){right:17%;top:62%;animation-delay:-2.5s}
#p-index .motion-stars i:nth-child(4){right:39%;top:18%;animation-delay:-5.2s;width:2px;height:2px}
#p-index .motion-stars i:nth-child(5){right:5%;top:74%;animation-delay:-3.3s;width:2px;height:2px}
#p-index .motion-stars i:nth-child(6){right:31%;top:77%;animation-delay:-6s}
#p-index .motion-stars i:nth-child(7){right:45%;top:48%;animation-delay:-.4s;width:2px;height:2px}
#p-index .motion-stars i:nth-child(8){right:13%;top:43%;animation-delay:-4.8s;width:4px;height:4px}
@keyframes v5Star{
  0%,100%{opacity:0;transform:scale(.35)}
  42%{opacity:.65;transform:scale(1)}
  62%{opacity:.18;transform:scale(.65)}
}

#p-index .motion-sheen{
  position:absolute;
  inset:-20% -40%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 39%,
    rgba(255,255,255,.00) 45%,
    rgba(219,248,190,.055) 49%,
    rgba(255,255,255,.11) 50%,
    rgba(219,248,190,.035) 52%,
    transparent 58%);
  transform:translateX(-34%) rotate(-3deg);
  animation:v5Sheen 9.5s cubic-bezier(.7,0,.2,1) infinite;
}
@keyframes v5Sheen{
  0%,55%{transform:translateX(-38%) rotate(-3deg);opacity:0}
  65%{opacity:1}
  100%{transform:translateX(34%) rotate(-3deg);opacity:0}
}

/* Make the transparent logo feel like part of the composition. */
#p-index .motion-logo{
  animation:v5LogoFloat 15s ease-in-out infinite alternate!important;
}
#p-index .motion-logo .brand-symbol{
  animation:v5MarkMorph 9s ease-in-out infinite!important;
}
@keyframes v5LogoFloat{
  from{transform:translate3d(0,0,0) rotate(-5deg);opacity:.10}
  to{transform:translate3d(-16px,8px,0) rotate(-2deg);opacity:.18}
}
@keyframes v5MarkMorph{
  0%,100%{border-radius:18px 18px 7px 18px;transform:rotate(0deg)}
  50%{border-radius:22px 10px 20px 10px;transform:rotate(7deg)}
}

/* Stronger but elegant text entrance. */
#p-index:not([hidden]) .hero-copy h1{
  transform-origin:left bottom;
  animation:v5HeroHeadline .95s cubic-bezier(.16,1,.3,1) .10s both!important;
}
@keyframes v5HeroHeadline{
  from{opacity:0;clip-path:inset(0 0 105% 0);transform:translateY(20px) skewY(1.2deg)}
  to{opacity:1;clip-path:inset(-12% -4% -12% -4%);transform:none}
}
#p-index:not([hidden]) .hero-copy .lead{
  animation:v5HeroCopy .76s cubic-bezier(.16,1,.3,1) .25s both!important;
}
#p-index:not([hidden]) .hero-copy .head-actions{
  animation:v5HeroCopy .76s cubic-bezier(.16,1,.3,1) .34s both!important;
}
@keyframes v5HeroCopy{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Hero buttons get a tiny inner light sweep. */
#p-index .hero .btn,
.gate-card-premium .gate-google{
  position:relative;
  overflow:hidden;
}
#p-index .hero .btn:after,
.gate-card-premium .gate-google:after{
  content:'';
  position:absolute;
  top:-60%;bottom:-60%;
  width:32%;
  left:-46%;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .75s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
#p-index .hero .btn:hover:after,
.gate-card-premium .gate-google:hover:after{left:118%}

/* ---------------- LOGIN ---------------- */
.gate-showcase{
  --gate-x:74%;
  --gate-y:22%;
}
.gate-showcase-inner:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle 240px at var(--gate-x) var(--gate-y),
    rgba(185,236,107,.22),
    rgba(185,236,107,.06) 40%,
    transparent 72%);
}
.gate-showcase:before{
  animation:v5GateGrid 30s linear infinite!important;
}
@keyframes v5GateGrid{
  from{background-position:0 0,0 0}
  to{background-position:62px 62px,-62px 62px}
}

/* Gentle moving contour lines on login showcase. */
.gate-showcase .gate-aurora:after{
  content:'';
  position:absolute;
  width:520px;height:520px;
  right:-210px;bottom:-170px;
  border-radius:50%;
  border:1px solid rgba(63,91,68,.08);
  box-shadow:
    0 0 0 48px rgba(63,91,68,.025),
    0 0 0 96px rgba(63,91,68,.018),
    0 0 0 146px rgba(63,91,68,.012);
  animation:v5GateOrbit 22s linear infinite;
}
@keyframes v5GateOrbit{to{transform:rotate(360deg)}}

.gate-signature{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  width:max-content;
  color:#7c8f82;
  font-size:8px;
  letter-spacing:1.55px;
  text-transform:uppercase;
  font-weight:800;
}
.gate-signature i{
  display:block;
  width:42px;height:1px;
  position:relative;
  overflow:hidden;
  background:rgba(68,101,75,.16);
}
.gate-signature i:after{
  content:'';
  position:absolute;
  inset:0;
  background:#8ab257;
  transform:translateX(-100%);
  animation:v5Signature 3.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes v5Signature{
  0%{transform:translateX(-100%)}
  45%,100%{transform:translateX(105%)}
}

/* Preview cards have a slow staggered breathing depth, not bouncing. */
.gate-preview-card{
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease!important;
}
.gate-preview-card:nth-child(1){animation:v5PreviewA 8s ease-in-out infinite}
.gate-preview-card:nth-child(2){animation:v5PreviewB 9.5s ease-in-out infinite}
.gate-preview-card:nth-child(3){animation:v5PreviewC 10.5s ease-in-out infinite}
@keyframes v5PreviewA{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes v5PreviewB{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
@keyframes v5PreviewC{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
.gate-preview-card:hover{transform:translateY(-5px)!important;box-shadow:0 22px 52px rgba(26,53,38,.16)}

/* Login card enters with more polish. */
.gate.open .gate-card-premium{
  animation:v5LoginCard .88s cubic-bezier(.16,1,.3,1) .08s both!important;
}
@keyframes v5LoginCard{
  from{opacity:0;transform:translateX(20px) scale(.985);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

/* ---------------- PAGE / CARD MOTION ---------------- */
.main.page .card.studi-in{
  transition:
    opacity .62s cubic-bezier(.16,1,.3,1),
    transform .62s cubic-bezier(.16,1,.3,1),
    filter .62s ease,
    box-shadow .35s ease,
    border-color .35s ease!important;
}

/* cursor-follow light on cards */
.card.v5-lit{
  position:relative;
  overflow:hidden;
}
.card.v5-lit:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle 170px at var(--cx,50%) var(--cy,50%),
    rgba(185,236,107,.10),
    transparent 70%);
  opacity:0;
  transition:opacity .28s ease;
}
.card.v5-lit:hover:before{opacity:1}
.card.v5-lit > *{position:relative;z-index:1}

/* Keep animation accessible. */
@media(prefers-reduced-motion:reduce){
  #p-index .motion-grid,#p-index .motion-arc,#p-index .motion-stars i,
  #p-index .motion-sheen,#p-index .motion-logo,#p-index .motion-logo .brand-symbol,
  .gate-showcase:before,.gate-showcase .gate-aurora:after,
  .gate-signature i:after,.gate-preview-card{
    animation:none!important;
  }
}