/* ==========================================================================
   Teachers Live — PHASE 10 FIX2
   Final Visual Candidate
   Additive visual layer only — no routes/handlers/database/business logic.
   ========================================================================== */

:root{
  --tl10f2-dark:#03111f;
  --tl10f2-dark2:#08283f;
  --tl10f2-green:#087b64;
  --tl10f2-green2:#0ca581;
  --tl10f2-gold:#d0a43b;
  --tl10f2-gold2:#ecd17f;
  --tl10f2-ease:cubic-bezier(.16,.84,.24,1);
}

/* ------------------------- LOGIN MOTION ------------------------- */

.tl-cinema-entry{
  background-size:115% 115%!important;
  animation:tl10f2Ambient 12s ease-in-out infinite alternate;
}

.tl-cinema-entry::before{
  animation:tl10f2Mesh 18s linear infinite alternate;
}

.tl-cinema-entry-copy{
  animation:tl10f2HeroSlide .9s var(--tl10f2-ease) both!important;
}

.tl-cinema-login-card{
  animation:tl10f2LoginSlide .9s .08s var(--tl10f2-ease) both!important;
}

.tl-cinema-entry-kicker{
  animation:tl10f2Pop .62s .25s var(--tl10f2-ease) both!important;
}

.tl-cinema-entry-copy h1{
  animation:tl10f2Title .82s .18s var(--tl10f2-ease) both!important;
}

.tl-cinema-entry-copy p{
  animation:tl10f2FadeUp .72s .34s var(--tl10f2-ease) both!important;
}

.tl-cinema-entry-features>div{
  animation:tl10f2Feature .64s var(--tl10f2-ease) both!important;
}
.tl-cinema-entry-features>div:nth-child(1){animation-delay:.48s!important}
.tl-cinema-entry-features>div:nth-child(2){animation-delay:.58s!important}
.tl-cinema-entry-features>div:nth-child(3){animation-delay:.68s!important}

.tl-cinema-live-dot{
  animation:tlCinemaPulse 1.55s infinite!important;
}

.tl-cinema-login-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(208,164,59,.18),transparent 47%,rgba(12,165,129,.12),transparent 78%);
  background-size:220% 100%;
  opacity:.65;
  mix-blend-mode:soft-light;
  animation:tl10f2BorderSweep 6.5s linear infinite;
}

.tl-cinema-login-submit{
  isolation:isolate;
}
.tl-cinema-login-submit::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -35%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  z-index:-1;
  animation:tl10f2ButtonSweep 4.5s 1.8s ease-in-out infinite;
}

/* ------------------------- PORTAL UNITY ------------------------- */

body.tl10-student .tl-portal-body,
body.tl10-teacher .tl-portal-body{
  position:relative;
  isolation:isolate;
}

body.tl10-student .tl-portal-body::before,
body.tl10-teacher .tl-portal-body::before{
  content:"";
  position:fixed;
  inset:70px 0 0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 7% 4%,rgba(208,164,59,.085),transparent 26rem),
    radial-gradient(circle at 95% 12%,rgba(12,165,129,.085),transparent 28rem);
}

body.tl10-student .tl-hero,
body.tl10-teacher .tl-hero{
  min-height:205px!important;
  transform:translateZ(0);
  animation:tl10f2PortalHero .72s var(--tl10f2-ease) both!important;
}

body.tl10-student .tl-hero::after,
body.tl10-teacher .tl-hero::after{
  opacity:.9;
}

.tl10f2-stagger{
  animation:tl10f2Section .58s var(--tl10f2-ease) both!important;
  animation-delay:var(--tl10f2-delay,0ms)!important;
}

.tl-final-class-row{
  min-height:68px;
}
.tl-final-class-row:hover{
  transform:translateY(-4px) scale(1.003)!important;
}
.tl-final-class-row.tl10f2-live{
  border-color:rgba(12,165,129,.28)!important;
  background:
    radial-gradient(circle at 8% 50%,rgba(12,165,129,.10),transparent 10rem),
    linear-gradient(135deg,#fff,#f6fbf8)!important;
}
.tl-final-class-row.tl10f2-live::before{
  width:5px!important;
  opacity:1!important;
  box-shadow:0 0 18px rgba(12,165,129,.30);
}
.tl-final-class-row.tl10f2-upcoming{
  background:
    radial-gradient(circle at 7% 50%,rgba(208,164,59,.08),transparent 10rem),
    linear-gradient(135deg,#fff,#fffdf8)!important;
}
.tl-final-class-row.tl10f2-done{
  filter:saturate(.86);
}

/* CTA presence */
.tl10f2-start-session{
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 12px 30px rgba(8,123,100,.24)!important;
}
.tl10f2-start-session::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 0 rgba(12,165,129,.28);
  animation:tl10f2CtaPulse 2.4s infinite;
}
.tl10f2-recording-link{
  position:relative;
}
.tl10f2-recording-link::after{
  content:"▶";
  margin-inline-start:.35rem;
  font-size:.72em;
}

/* ------------------------- SUBJECT ARTWORK STAGE ------------------------- */

.tl8e-subject-main-link,
.tl8e-dashboard-subject{
  position:relative!important;
}

.tl8e-subject-main-link::before,
.tl8e-dashboard-subject::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  pointer-events:none;
  border:1px solid rgba(6,34,49,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.tl8e-subject-main-link{
  min-height:160px;
  background:
    radial-gradient(circle at 25% 20%,rgba(208,164,59,.09),transparent 8rem),
    radial-gradient(circle at 80% 75%,rgba(12,165,129,.08),transparent 9rem),
    linear-gradient(145deg,#fbfdfb,#edf4ef)!important;
}

.tl8e-subject-image{
  max-width:92%!important;
  max-height:92%!important;
  margin:auto!important;
  filter:drop-shadow(0 9px 18px rgba(4,23,39,.08)) saturate(.98)!important;
}

.tl8e-dashboard-subject img{
  max-width:94%!important;
  max-height:94%!important;
  margin:auto!important;
  filter:drop-shadow(0 7px 14px rgba(4,23,39,.07)) saturate(.98)!important;
}

.tl8e-dashboard-subject:hover img,
.tl-subject-card:hover .tl8e-subject-image{
  transform:scale(1.028)!important;
}

/* ------------------------- ADMIN DEPTH ------------------------- */

body.tl10-admin .tl-stat,
body.tl10-admin .tl-quick-link,
body.tl10-admin .tl-card{
  transition:transform .24s var(--tl10f2-ease),box-shadow .24s,border-color .24s!important;
}
body.tl10-admin .tl-stat:hover,
body.tl10-admin .tl-quick-link:hover{
  transform:translateY(-4px)!important;
}
body.tl10-admin .tl-stat::before{
  height:3px!important;
  background:linear-gradient(90deg,var(--tl10f2-green2),var(--tl10f2-gold))!important;
}

/* ------------------------- MOBILE PORTAL HEADER ------------------------- */

@media(max-width:575.98px){
  body.tl10-student,
  body.tl10-teacher{
    padding-bottom:118px!important;
  }

  body.tl10-student .tl-portal,
  body.tl10-teacher .tl-portal{
    padding-bottom:0!important;
  }

  .tl-portal-nav{
    min-height:58px!important;
    background:rgba(248,251,249,.94)!important;
  }

  .tl8d-portal-bar{
    min-height:58px!important;
    padding:.35rem .75rem!important;
    justify-content:space-between!important;
  }

  .tl8d-portal-brand{
    margin-inline-end:0!important;
  }

  .tl8d-portal-brand .tl-brand-logo{
    max-height:38px!important;
    width:auto!important;
  }

  .tl8d-mobile-menu{
    display:none!important;
  }

  .tl10f2-mobile-head-actions{
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-inline-start:auto;
  }

  .tl10f2-mobile-head-actions form{
    margin:0!important;
  }

  .tl10f2-mobile-logout{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#d34949!important;
    border:1px solid rgba(211,73,73,.26)!important;
    box-shadow:0 6px 14px rgba(4,23,39,.06)!important;
  }

  .tl10-bottom-nav{
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:min(calc(100% - 24px),420px)!important;
    min-height:64px!important;
  }

  .tl-portal-body{
    padding-bottom:16px!important;
  }

  .tl-fix3-portal-footer{
    margin-bottom:92px!important;
  }

  body.tl10-student .tl-hero,
  body.tl10-teacher .tl-hero{
    min-height:138px!important;
    padding:.9rem 1rem!important;
  }

  body.tl10-student .tl-hero h1,
  body.tl10-student .tl-hero h2,
  body.tl10-teacher .tl-hero h1,
  body.tl10-teacher .tl-hero h2{
    font-size:1.55rem!important;
    line-height:1.1!important;
  }

  .tl-final-class-row{
    min-height:94px!important;
    border-radius:17px!important;
  }

  .tl8e-subject-main-link{
    min-height:105px!important;
  }
}

/* ------------------------- MOBILE LOGIN ------------------------- */

@media(max-width:575.98px){
  .tl-public:has(.tl-cinema-entry) > .navbar{
    min-height:58px!important;
  }

  .tl-cinema-entry-grid{
    gap:.45rem!important;
    padding-top:.15rem!important;
  }

  .tl-cinema-entry-story{
    padding:.1rem .25rem!important;
  }

  .tl-cinema-entry-kicker{
    font-size:.68rem!important;
    padding:.28rem .58rem!important;
  }

  .tl-cinema-entry-copy h1{
    margin:.22rem 0 .12rem!important;
    font-size:clamp(2rem,10vw,2.85rem)!important;
    line-height:.86!important;
  }

  .tl-cinema-entry-copy p{
    font-size:.72rem!important;
    line-height:1.45!important;
    max-width:300px!important;
  }

  .tl-cinema-login-card{
    padding:.9rem!important;
  }

  .tl-cinema-login-head{
    margin-bottom:.6rem!important;
  }

  .tl-cinema-login-head h2{
    font-size:1.5rem!important;
  }

  .tl-cinema-role-switch{
    margin-bottom:.65rem!important;
  }

  .tl-cinema-login-foot{
    margin-top:.65rem!important;
  }
}

/* ------------------------- TABLET PORTRAIT ------------------------- */

@media(min-width:576px) and (max-width:991.98px) and (orientation:portrait){
  .tl-cinema-entry-grid{
    align-content:center!important;
    min-height:100svh!important;
    padding-top:4.5rem!important;
    padding-bottom:2rem!important;
  }

  .tl-cinema-entry-story{
    padding-bottom:.3rem!important;
  }

  .tl-cinema-entry-copy h1{
    font-size:clamp(2.9rem,7.4vw,4.2rem)!important;
  }

  .tl-cinema-login-card{
    width:min(100%,600px)!important;
  }

  body.tl10-student .tl-hero,
  body.tl10-teacher .tl-hero{
    min-height:180px!important;
  }
}

/* ------------------------- TABLET LANDSCAPE ------------------------- */

@media(min-width:768px) and (max-width:1199.98px) and (orientation:landscape){
  body.tl10-student .tl-hero,
  body.tl10-teacher .tl-hero{
    min-height:185px!important;
  }

  .tl8e-dashboard-subjects{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .tl-final-class-row{
    min-height:64px!important;
  }
}

/* ------------------------- MOTION KEYFRAMES ------------------------- */

@keyframes tl10f2HeroSlide{
  from{opacity:0;transform:translate3d(46px,0,0)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2LoginSlide{
  from{opacity:0;transform:translate3d(-44px,18px,0) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2Title{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2FadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2Pop{
  from{opacity:0;transform:scale(.88)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2Feature{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2Section{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2PortalHero{
  from{opacity:0;transform:translateY(12px) scale(.993)}
  to{opacity:1;transform:none}
}
@keyframes tl10f2Ambient{
  from{background-position:0% 0%}
  to{background-position:100% 100%}
}
@keyframes tl10f2Mesh{
  from{transform:translate3d(-1%,0,0)}
  to{transform:translate3d(1.5%,-1%,0)}
}
@keyframes tl10f2BorderSweep{
  from{background-position:180% 0}
  to{background-position:-40% 0}
}
@keyframes tl10f2ButtonSweep{
  0%,62%{left:-35%;opacity:0}
  70%{opacity:1}
  88%{left:125%;opacity:1}
  100%{left:125%;opacity:0}
}
@keyframes tl10f2CtaPulse{
  0%{box-shadow:0 0 0 0 rgba(12,165,129,.25)}
  70%{box-shadow:0 0 0 11px rgba(12,165,129,0)}
  100%{box-shadow:0 0 0 0 rgba(12,165,129,0)}
}

/* Respect accessibility */
@media(prefers-reduced-motion:reduce){
  .tl-cinema-entry,
  .tl-cinema-entry::before,
  .tl-cinema-entry-copy,
  .tl-cinema-login-card,
  .tl-cinema-entry-kicker,
  .tl-cinema-entry-copy h1,
  .tl-cinema-entry-copy p,
  .tl-cinema-entry-features>div,
  .tl10f2-stagger,
  .tl10f2-start-session::before,
  body.tl10-student .tl-hero,
  body.tl10-teacher .tl-hero{
    animation:none!important;
  }
}