/* ==========================================================================
   Teachers Live — PHASE 10 FIX1
   Responsive Visual Tuning + Unified Cinema Motion
   Additive override. No business logic changes.
   ========================================================================== */

:root{
  --tl10fx-dark:#04111e;
  --tl10fx-dark2:#08243a;
  --tl10fx-green:#087b64;
  --tl10fx-green2:#0ba17e;
  --tl10fx-gold:#d0a43b;
  --tl10fx-gold2:#ead080;
  --tl10fx-ease:cubic-bezier(.16,.84,.24,1);
}

/* --------------------------------------------------------------------------
   1) LOGIN — real motion + mobile-first correction
   -------------------------------------------------------------------------- */

.tl-cinema-entry{
  min-height:100svh!important;
}

.tl-cinema-entry-copy,
.tl-cinema-login-card,
.tl-cinema-entry-kicker,
.tl-cinema-entry-features>div{
  will-change:transform,opacity;
}

.tl-cinema-entry-copy{
  animation:tl10fxHeroIn .85s var(--tl10fx-ease) both;
}

.tl-cinema-login-card{
  animation:tl10fxCardIn .8s .10s var(--tl10fx-ease) both!important;
}

.tl-cinema-entry-kicker{
  animation:tl10fxFadeUp .65s .16s var(--tl10fx-ease) both;
}

.tl-cinema-entry-copy h1{
  overflow:hidden;
}

.tl-cinema-entry-copy h1 br{
  content:"";
}

.tl-cinema-entry-copy h1,
.tl-cinema-entry-copy p{
  animation:tl10fxFadeUp .72s var(--tl10fx-ease) both;
}

.tl-cinema-entry-copy h1{animation-delay:.12s}
.tl-cinema-entry-copy p{animation-delay:.24s}

.tl-cinema-entry-features>div:nth-child(1){animation:tl10fxFeatureIn .65s .34s var(--tl10fx-ease) both}
.tl-cinema-entry-features>div:nth-child(2){animation:tl10fxFeatureIn .65s .42s var(--tl10fx-ease) both}
.tl-cinema-entry-features>div:nth-child(3){animation:tl10fxFeatureIn .65s .50s var(--tl10fx-ease) both}

.tl-cinema-login-submit{
  position:relative;
  overflow:hidden;
}

.tl-cinema-login-submit::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -55%;
  width:42%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .6s var(--tl10fx-ease);
}

.tl-cinema-login-submit:hover::before{
  left:115%;
}

.tl-cinema-role-switch a{
  transition:transform .22s var(--tl10fx-ease),background .22s,color .22s,box-shadow .22s!important;
}

.tl-cinema-role-switch a:hover{
  transform:translateY(-2px);
}

.tl-cinema-input-wrap .form-control:focus{
  transform:translateY(-2px)!important;
}

/* --------------------------------------------------------------------------
   2) STUDENT + TEACHER — unify them with cinematic login identity
   -------------------------------------------------------------------------- */

body.tl10-student .tl-portal-body,
body.tl10-teacher .tl-portal-body{
  background:
    radial-gradient(circle at 8% 5%,rgba(208,164,59,.08),transparent 26rem),
    radial-gradient(circle at 94% 14%,rgba(11,161,126,.08),transparent 28rem),
    linear-gradient(180deg,#f4f7f5,#eef3f0)!important;
}

body.tl10-student .tl-hero,
body.tl10-teacher .tl-hero{
  min-height:220px!important;
  background:
    radial-gradient(circle at 13% 18%,rgba(208,164,59,.28),transparent 14rem),
    radial-gradient(circle at 88% 22%,rgba(11,161,126,.27),transparent 19rem),
    linear-gradient(120deg,#04111e 0%,#0a314a 50%,#08614f 100%)!important;
}

body.tl10-student .tl-hero::before,
body.tl10-teacher .tl-hero::before{
  background:
    linear-gradient(100deg,rgba(0,0,0,.08),transparent 52%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.024) 0 1px,transparent 1px 17px)!important;
}

body.tl10-student .tl-hero,
body.tl10-teacher .tl-hero,
body.tl10-student .tl-card,
body.tl10-teacher .tl-card,
body.tl10-student .tl-subject-card,
body.tl10-teacher .tl-subject-card{
  animation:tl10fxSectionIn .55s var(--tl10fx-ease) both;
}

.tl-final-class-row{
  overflow:hidden!important;
}

.tl-final-class-row::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 0 62%,rgba(255,255,255,.34) 73%,transparent 84%);
  transform:translateX(120%);
  transition:transform .75s var(--tl10fx-ease);
}

.tl-final-class-row:hover::after{
  transform:translateX(-120%);
}

/* stronger live/upcoming states */
.tl-final-class-row:has(.tl-status-live){
  border-color:rgba(11,161,126,.22)!important;
  box-shadow:0 14px 34px rgba(8,123,100,.11)!important;
}

.tl-final-class-row:has(.tl-status-upcoming){
  border-color:rgba(208,164,59,.18)!important;
}

.tl-final-class-row:has(.tl-status-done){
  opacity:.90;
}

/* consistent subject artwork */
.tl8e-dashboard-subject,
.tl-subject-card{
  background:linear-gradient(180deg,#fff,#f8fbf9)!important;
}

.tl8e-dashboard-subject img,
.tl8e-subject-image{
  filter:saturate(.98) contrast(1.01);
}

.tl8e-dashboard-subject::before,
.tl-subject-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  z-index:3;
  background:linear-gradient(90deg,transparent,var(--tl10fx-gold),var(--tl10fx-green),transparent);
  opacity:.65;
}

/* --------------------------------------------------------------------------
   3) ADMIN — same brand DNA, still productivity-first
   -------------------------------------------------------------------------- */

body.tl10-admin .tl-main{
  background:
    radial-gradient(circle at 8% 3%,rgba(208,164,59,.07),transparent 24rem),
    radial-gradient(circle at 96% 14%,rgba(11,161,126,.06),transparent 26rem),
    #f2f5f4!important;
}

body.tl10-admin .tl-card,
body.tl10-admin .tl-stat,
body.tl10-admin .tl-quick-link{
  animation:tl10fxSectionIn .48s var(--tl10fx-ease) both;
}

body.tl10-admin .tl-stat{
  position:relative;
  overflow:hidden;
}

body.tl10-admin .tl-stat::before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;height:2px;
  background:linear-gradient(90deg,var(--tl10fx-green),var(--tl10fx-gold));
  opacity:.55;
}

/* --------------------------------------------------------------------------
   4) TABLET — dedicated treatment, not scaled desktop
   -------------------------------------------------------------------------- */

@media(min-width:576px) and (max-width:991.98px){
  .tl-cinema-entry-grid{
    min-height:auto!important;
    grid-template-columns:1fr!important;
    gap:1rem!important;
    padding-top:1rem!important;
    padding-bottom:calc(1.3rem + env(safe-area-inset-bottom))!important;
  }

  .tl-cinema-entry-story{
    min-height:auto!important;
    padding:.5rem 1rem .2rem!important;
  }

  .tl-cinema-entry-copy{
    max-width:none!important;
    text-align:center;
  }

  .tl-cinema-entry-copy h1{
    margin:.6rem 0!important;
    font-size:clamp(2.6rem,7vw,4.2rem)!important;
    line-height:.95!important;
  }

  .tl-cinema-entry-copy p{
    max-width:650px!important;
    margin-inline:auto!important;
  }

  .tl-cinema-entry-features{
    justify-content:center!important;
    margin-top:1rem!important;
  }

  .tl-cinema-entry-features>div{
    min-width:0!important;
    flex:1 1 30%;
  }

  .tl-cinema-login-panel{
    justify-content:center!important;
  }

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

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

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

  .tlr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.tl10-admin .tl-main{
    padding-inline:1rem!important;
  }
}

/* --------------------------------------------------------------------------
   5) PHONE — login visible immediately, hero compact
   -------------------------------------------------------------------------- */

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

  .tl-public:has(.tl-cinema-entry) > .navbar .nav-link{
    display:none!important;
  }

  .tl-cinema-entry{
    min-height:auto!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))!important;
  }

  .tl-cinema-entry-grid{
    display:flex!important;
    flex-direction:column!important;
    min-height:auto!important;
    gap:.65rem!important;
    padding-top:.45rem!important;
    padding-bottom:.4rem!important;
  }

  .tl-cinema-entry-story{
    min-height:auto!important;
    padding:.3rem .25rem!important;
    justify-content:flex-start!important;
  }

  .tl-cinema-entry-copy{
    text-align:center!important;
  }

  .tl-cinema-entry-kicker{
    padding:.34rem .65rem!important;
    font-size:.72rem!important;
  }

  .tl-cinema-entry-copy h1{
    margin:.35rem 0 .2rem!important;
    font-size:clamp(2.2rem,11vw,3.3rem)!important;
    line-height:.88!important;
    letter-spacing:-.055em!important;
  }

  .tl-cinema-entry-copy p{
    max-width:330px!important;
    margin-inline:auto!important;
    font-size:.78rem!important;
    line-height:1.55!important;
  }

  .tl-cinema-entry-features,
  .tl-cinema-entry-signature{
    display:none!important;
  }

  .tl-cinema-login-panel{
    width:100%!important;
    justify-content:stretch!important;
  }

  .tl-cinema-login-card{
    width:100%!important;
    padding:1rem!important;
    border-radius:22px!important;
    box-shadow:0 22px 55px rgba(0,0,0,.24)!important;
  }

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

  .tl-cinema-login-head h2{
    font-size:1.6rem!important;
    margin:.15rem 0 .2rem!important;
  }

  .tl-cinema-login-head p{
    font-size:.76rem!important;
  }

  .tl-cinema-role-switch{
    margin-bottom:.8rem!important;
    padding:.3rem!important;
    border-radius:14px!important;
  }

  .tl-cinema-role-switch a{
    min-height:40px!important;
    padding:.45rem!important;
    font-size:.78rem!important;
    border-radius:11px!important;
  }

  .tl-cinema-field .form-label{
    margin-bottom:.28rem!important;
    font-size:.75rem!important;
  }

  .tl-cinema-input-wrap .form-control{
    min-height:48px!important;
    border-radius:13px!important;
  }

  .tl-cinema-login-submit{
    min-height:49px!important;
    border-radius:13px!important;
  }

  .tl-cinema-login-foot{
    margin-top:.8rem!important;
    padding-top:.7rem!important;
  }

  body.tl10-student .tl-hero,
  body.tl10-teacher .tl-hero{
    min-height:150px!important;
    padding:1rem!important;
    border-radius:20px!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.7rem!important;
  }

  .tl-page-head{
    margin-bottom:.8rem!important;
  }

  .tl-card-header{
    min-height:54px!important;
  }

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

  .tl8e-dashboard-subject{
    grid-template-rows:98px auto!important;
    min-height:154px!important;
  }

  .tl8e-dashboard-subject img{
    height:98px!important;
  }
}

/* --------------------------------------------------------------------------
   6) Extra motion polish
   -------------------------------------------------------------------------- */

@keyframes tl10fxHeroIn{
  from{opacity:0;transform:translate3d(32px,0,0)}
  to{opacity:1;transform:none}
}

@keyframes tl10fxCardIn{
  from{opacity:0;transform:translate3d(-28px,18px,0) scale(.985)}
  to{opacity:1;transform:none}
}

@keyframes tl10fxFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

@keyframes tl10fxFeatureIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}

@keyframes tl10fxSectionIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .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,
  body.tl10-student .tl-hero,
  body.tl10-teacher .tl-hero,
  body.tl10-admin .tl-card,
  body.tl10-admin .tl-stat,
  body.tl10-admin .tl-quick-link{
    animation:none!important;
  }
}