/* ================================================================
   STUDI — PREMIUM SCALE + MOTION LAYER
   Editorial scale / kinetic motion inspired by modern portfolio sites,
   while retaining Studi's own visual language and product structure.
   ================================================================ */

:root{
  --studi-fs-body:15.5px;
  --studi-fs-nav:13.5px;
  --studi-fs-small:11.5px;
  --studi-fs-micro:10px;
  --studi-fs-lead:17px;
  --studi-fs-h3:17px;
  --studi-fs-h2:27px;
  --studi-fs-h1-min:42px;
  --studi-fs-h1-max:68px;
  --studi-fs-hero-min:58px;
  --studi-fs-hero-max:104px;
  --studi-motion:cubic-bezier(.16,1,.3,1);
  --studi-ink:#1f392f;
  --studi-lime:#b9df7a;
  --studi-glass:rgba(255,254,250,.72);
}

/* ---- global readability ---- */
body{
  font-size:var(--studi-fs-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.main.page{
  padding-left:clamp(34px,4.7vw,84px)!important;
  padding-right:clamp(34px,4.7vw,84px)!important;
}
.nav a{
  font-size:var(--studi-fs-nav)!important;
  padding:12px 13px!important;
}
.nav-label{font-size:var(--studi-fs-micro)!important}
.profile-mini strong,.side-card b{font-size:var(--studi-fs-small)!important}
.profile-mini small,.side-card p{font-size:var(--studi-fs-micro)!important}
.crumb{font-size:var(--studi-fs-small)!important}
.pill{font-size:var(--studi-fs-micro)!important;padding:9px 13px!important}
.eyebrow{font-size:var(--studi-fs-micro)!important;letter-spacing:2.6px!important}
h1{
  font-size:clamp(var(--studi-fs-h1-min),4.8vw,var(--studi-fs-h1-max))!important;
  letter-spacing:-2.7px!important;
  line-height:1.02!important;
}
h2{font-size:var(--studi-fs-h2)!important;letter-spacing:-1px!important}
h3{font-size:var(--studi-fs-h3)!important}
.lead{font-size:var(--studi-fs-lead)!important;line-height:1.65!important;max-width:760px!important}
.btn{
  font-size:var(--studi-fs-small)!important;
  padding:12px 17px!important;
  border-radius:13px!important;
}
.link{font-size:var(--studi-fs-small)!important}
.card p,.course-card p,.room-card p,.message,.bubble,.integration-card p{
  font-size:var(--studi-fs-small)!important;
}
.stat span,.stat small,.tag,.course-meta,.topic small,label{
  font-size:var(--studi-fs-micro)!important;
}
.stat strong{font-size:31px!important}
.course-row b{font-size:13px!important}
.course-row small{font-size:10.5px!important}
.course-row .score{font-size:15px!important}
.section-head small{font-size:10.5px!important}
.page-head{
  margin-bottom:34px!important;
  padding-top:8px;
}
.page-head h1{max-width:1000px}
.topbar{margin-bottom:42px!important}

/* ---- top typography scale controller ---- */
.studi-type-scale{
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid rgba(49,78,64,.12);
  background:rgba(255,254,250,.78);
  backdrop-filter:blur(14px);
  border-radius:999px;
}
.studi-type-scale button{
  height:28px;
  min-width:29px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#607a6c;
  font:800 10px DM Sans,sans-serif;
  padding:0 7px;
  transition:.2s var(--studi-motion);
}
.studi-type-scale button:hover{background:#e5eee0;color:#2b4b3a;transform:translateY(-1px)}
.studi-type-scale .scale-value{
  min-width:47px;
  background:#edf3e7;
  color:#3f634c;
}
.studi-type-scale .scale-value:hover{background:#dfeadb}

/* ---- cinematic homepage ---- */
#p-index{--hero-x:0px;--hero-y:0px}
#p-index .topbar{margin-bottom:22px!important}
#p-index .hero{
  min-height:clamp(540px,72vh,790px)!important;
  padding:clamp(48px,6vw,92px)!important;
  border-radius:40px!important;
  display:flex;
  align-items:center;
  isolation:isolate;
  background:
    radial-gradient(circle at 75% 24%,rgba(240,204,158,.66) 0 8%,transparent 9%),
    radial-gradient(circle at 74% 25%,rgba(151,190,154,.85) 0 21%,transparent 22%),
    linear-gradient(118deg,#f1f4e8 0%,#dfead9 43%,#a8c9ad 100%)!important;
  box-shadow:0 38px 100px rgba(50,83,62,.15)!important;
  border:1px solid rgba(73,110,83,.18)!important;
  overflow:hidden;
}
#p-index .hero:before{
  content:'STUDI';
  position:absolute;
  right:-.03em;
  bottom:-.22em;
  z-index:0;
  font:800 clamp(130px,18vw,330px)/.78 Manrope,sans-serif;
  letter-spacing:-.09em;
  color:rgba(255,255,255,.18);
  pointer-events:none;
  transform:translate3d(calc(var(--hero-x) * -.18),calc(var(--hero-y) * -.18),0);
  transition:transform .3s var(--studi-motion);
}
#p-index .hero:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.21;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
#p-index .hero-copy{
  position:relative;
  z-index:5;
  max-width:min(780px,64%)!important;
}
#p-index .hero h1{
  font-size:clamp(var(--studi-fs-hero-min),7.2vw,var(--studi-fs-hero-max))!important;
  line-height:.93!important;
  letter-spacing:-.065em!important;
  margin-bottom:24px!important;
}
#p-index .hero h1 em{
  display:inline-block;
  color:#466f55!important;
  transform:translateX(.025em);
}
#p-index .hero .lead{
  max-width:650px!important;
  font-size:clamp(16px,1.15vw,20px)!important;
  line-height:1.6!important;
  color:#5e7769!important;
}
#p-index .hero .head-actions{margin-top:32px!important;gap:12px!important}
#p-index .hero .btn{
  padding:14px 19px!important;
  font-size:12.5px!important;
}
#p-index .hero-orb{
  width:clamp(250px,27vw,480px)!important;
  height:clamp(250px,27vw,480px)!important;
  right:4%!important;
  top:9%!important;
  opacity:.94;
  filter:saturate(.9);
  transform:translate3d(var(--hero-x),var(--hero-y),0);
  transition:transform .35s var(--studi-motion);
  animation:premiumOrb 12s ease-in-out infinite!important;
}
#p-index .hero-ring{
  width:clamp(340px,34vw,560px)!important;
  height:clamp(340px,34vw,560px)!important;
  border-width:42px!important;
  right:-9%!important;
  bottom:-27%!important;
  transform:translate3d(calc(var(--hero-x) * -.45),calc(var(--hero-y) * -.45),0);
  animation:premiumRing 18s linear infinite!important;
}
#p-index .hero-pill{
  width:170px!important;height:56px!important;
  right:33%!important;bottom:10%!important;
  transform:translate3d(calc(var(--hero-x) * .55),calc(var(--hero-y) * .55),0) rotate(-8deg)!important;
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.38);
}
@keyframes premiumOrb{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:-18px 24px;rotate:5deg}
}
@keyframes premiumRing{to{rotate:360deg}}

/* floating hero information */
.studi-hero-floats{
  position:absolute;
  z-index:6;
  inset:0;
  pointer-events:none;
}
.hero-float-card{
  position:absolute;
  width:172px;
  padding:15px 16px;
  border-radius:20px;
  background:rgba(255,254,250,.68);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(1.18);
  box-shadow:0 18px 50px rgba(43,71,53,.12);
  color:#2f5140;
  animation:heroCardFloat 7s ease-in-out infinite;
}
.hero-float-card span{
  display:block;
  font-size:8px;
  letter-spacing:1.8px;
  font-weight:900;
  color:#789181;
  margin-bottom:8px;
}
.hero-float-card b{
  display:block;
  font:800 25px/1 Manrope,sans-serif;
  letter-spacing:-1px;
}
.hero-float-card small{
  display:block;
  font-size:9px;
  color:#72877a;
  margin-top:5px;
}
.hero-float-one{right:6%;top:9%;animation-delay:-2s}
.hero-float-two{right:20%;bottom:9%;animation-delay:-5s}
.hero-float-three{right:4%;top:47%;animation-delay:-1s}
@keyframes heroCardFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}

.studi-scroll-cue{
  position:absolute;
  z-index:7;
  left:clamp(48px,6vw,92px);
  bottom:25px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#5d7768;
  font-size:8px;
  letter-spacing:1.7px;
  font-weight:900;
}
.studi-scroll-cue i{
  width:34px;height:1px;background:#648273;position:relative;overflow:hidden;
}
.studi-scroll-cue i:after{
  content:'';
  position:absolute;inset:0;
  background:#fff;
  transform:translateX(-100%);
  animation:scrollCue 2.2s var(--studi-motion) infinite;
}
@keyframes scrollCue{50%,100%{transform:translateX(100%)}}

/* kinetic strip */
.studi-marquee{
  margin:24px 0 4px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(49,78,64,.11);
  background:#24463a;
  color:#eaf2df;
}
.studi-marquee-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:22px;
  padding:13px 0;
  animation:studiMarquee 28s linear infinite;
  font:800 11px Manrope,sans-serif;
  letter-spacing:2.8px;
}
.studi-marquee-track i{font-style:normal;color:#badf7d}
@keyframes studiMarquee{to{transform:translateX(-50%)}}

/* homepage cards now feel intentional at full-screen scale */
#p-index .quick-grid{gap:20px!important;margin-top:20px!important}
#p-index .focus-card,#p-index .exam-next{min-height:155px;padding:27px!important}
#p-index .focus-card .time{font-size:50px!important;letter-spacing:-3px!important}
#p-index .focus-card p{font-size:11.5px!important}
#p-index .grid-2,#p-index .grid-2-even{gap:20px!important}
#p-index .card-pad{padding:27px!important}
#p-index .course-row{padding:15px!important;grid-template-columns:44px 1fr auto!important;gap:13px!important}
#p-index .course-icon{width:44px!important;height:44px!important}
#p-index .week-chart{height:160px!important}
#p-index .youtube-mini{
  min-height:145px;
  padding:25px!important;
  grid-template-columns:190px 1fr auto!important;
  gap:22px!important;
}
#p-index .thumb{height:104px!important}
#p-index .improve-card{padding:28px!important;min-height:180px}

/* polished interaction system */
.card{
  transform-origin:center;
  will-change:transform;
}
.card.hover{
  transition:
    transform .42s var(--studi-motion),
    box-shadow .42s var(--studi-motion),
    border-color .42s var(--studi-motion)!important;
}
.card.hover:hover{
  transform:translateY(-7px)!important;
  box-shadow:0 28px 70px rgba(49,78,64,.11)!important;
}
.btn,.nav a,.link,.icon-btn,.pill{
  transition:transform .28s var(--studi-motion),background .28s ease,box-shadow .28s ease,color .28s ease!important;
}
.btn:hover{transform:translateY(-3px) scale(1.015)!important}
.btn.primary:hover{box-shadow:0 14px 35px rgba(85,130,93,.2)!important}

/* reveal on scroll */
.studi-reveal{
  opacity:0;
  transform:translateY(28px) scale(.985);
  transition:
    opacity .85s var(--studi-motion),
    transform .85s var(--studi-motion);
}
.studi-reveal.studi-in{
  opacity:1;
  transform:none;
}
.studi-reveal:nth-child(2){transition-delay:.04s}
.studi-reveal:nth-child(3){transition-delay:.08s}
.studi-reveal:nth-child(4){transition-delay:.12s}

/* page entrance */
.main.page:not([hidden]){
  animation:studiPageIn .58s var(--studi-motion) both!important;
}
@keyframes studiPageIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* more substantial layouts everywhere */
@media(min-width:1180px){
  .main.page{padding-top:34px!important}
  .grid-2,.grid-2-even{gap:22px!important}
  .card-pad{padding:26px}
}
@media(max-width:1260px){
  .hero-float-card{display:none}
  #p-index .hero-copy{max-width:76%!important}
}
@media(max-width:900px){
  #p-index .hero{
    min-height:560px!important;
    padding:44px 34px 70px!important;
    align-items:flex-end;
  }
  #p-index .hero-copy{max-width:100%!important}
  #p-index .hero h1{font-size:clamp(52px,10vw,82px)!important}
  #p-index .hero-orb{right:-11%!important;top:4%!important;opacity:.46}
  .studi-scroll-cue{left:34px}
  #p-index .youtube-mini{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .main.page{
    padding-left:19px!important;
    padding-right:19px!important;
  }
  .studi-type-scale{display:none}
  #p-index .hero{
    min-height:520px!important;
    border-radius:28px!important;
    padding:38px 24px 64px!important;
  }
  #p-index .hero h1{
    font-size:clamp(44px,14vw,66px)!important;
    letter-spacing:-.06em!important;
  }
  #p-index .hero .lead{font-size:15px!important}
  #p-index .hero .head-actions{display:grid!important}
  #p-index .hero .btn{justify-content:center}
  .studi-scroll-cue{left:24px}
  .studi-marquee{border-radius:14px}
}

/* motion accessibility */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .studi-reveal{opacity:1!important;transform:none!important}
}