/* ============ Мастерская Татьяны Любчик — design tokens ============ */
:root{
  --bg:#0D0B09; --surface:#151210; --surface-2:#1D1915; --glass:rgba(29,25,21,.55);
  --text:#F2EDE4; --muted:#A89F8F; --faint:#6E675C;
  --amber:#D9A24B; --amber-hi:#EFC076; --amber-lo:#8A6220;
  --teal:#43BDB2; --teal-lo:#0E6E66;
  --border:rgba(233,215,180,.12); --border-hi:rgba(233,215,180,.25);
  --danger:#E05B4C;
  --font-display:"Cormorant",serif; --font-body:"Montserrat",sans-serif;
  --r-sm:10px; --r-md:18px; --r-lg:28px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100dvh;
}
::selection{background:var(--amber); color:#151210}

/* ---- фоновая атмосфера: янтарь + смола ---- */
.ambient{position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--bg)}
.ambient::before,.ambient::after{
  content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  filter:blur(90px); opacity:.22; will-change:transform;
}
.ambient::before{background:radial-gradient(circle,#C98F35,transparent 60%); top:-20vmax; left:-12vmax; animation:drift 26s var(--ease) infinite alternate}
.ambient::after{background:radial-gradient(circle,#14746B,transparent 60%); bottom:-25vmax; right:-15vmax; animation:drift 32s var(--ease) infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(9vmax,6vmax) scale(1.15)}}
.grain{position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(4%,2%)}}
@media (prefers-reduced-motion:reduce){
  .ambient::before,.ambient::after,.grain{animation:none}
  *{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

/* ---- типографика ---- */
h1,h2,h3,.display{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:.01em}
.display-xl{font-size:clamp(2.6rem,7vw,5.4rem)}
.display-lg{font-size:clamp(2rem,4.5vw,3.4rem)}
.eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--amber)}
.lead{color:var(--muted); font-weight:300; font-size:clamp(1rem,1.4vw,1.15rem); max-width:56ch}
.serif-i{font-style:italic; color:var(--amber-hi)}

/* ---- каркас ---- */
.container{width:min(1180px,92vw); margin-inline:auto}
.section{padding:clamp(4rem,9vh,7rem) 0}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}

/* ---- шапка ---- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:linear-gradient(rgba(13,11,9,.85),rgba(13,11,9,.35));
  border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-size:1.25rem; letter-spacing:.04em}
.logo-mark{width:34px;height:34px; border-radius:9px; flex:none;
  background:conic-gradient(from 210deg,var(--amber),#7c4d12 40%,var(--teal-lo) 60%,var(--teal));
  box-shadow:0 0 18px rgba(217,162,75,.35)}
.nav-links{display:flex; gap:2rem; align-items:center; font-size:.88rem; color:var(--muted)}
.nav-links a{transition:color .25s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}

/* ---- кнопки ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.8rem 1.9rem; border-radius:999px; border:1px solid transparent;
  font-size:.92rem; font-weight:600; letter-spacing:.03em;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(120deg,var(--amber-hi),var(--amber) 55%,var(--amber-lo)); color:#231a0c;
  box-shadow:0 6px 24px -6px rgba(217,162,75,.45)}
.btn-primary:hover{box-shadow:0 10px 34px -6px rgba(217,162,75,.65); transform:translateY(-2px)}
.btn-ghost{border-color:var(--border-hi); color:var(--text); background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber-hi)}
.btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---- стекло-карты ---- */
.card{background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s}
.card:hover{border-color:var(--border-hi)}

/* ---- каталог курсов ---- */
.courses-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1.4rem}
.course-card{grid-column:span 6; position:relative; display:flex; flex-direction:column; min-height:340px; padding:2rem; cursor:pointer}
.course-card.wide{grid-column:span 7}
.course-card.narrow{grid-column:span 5}
.course-card:hover{transform:translateY(-6px); box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.course-card .glow{position:absolute; inset:0; opacity:0; transition:opacity .5s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%),rgba(217,162,75,.13),transparent 65%)}
.course-card:hover .glow{opacity:1}
.course-tier{display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:999px; border:1px solid var(--border-hi); color:var(--muted); margin-bottom:1.1rem}
.course-tier.vip{color:#231a0c; background:linear-gradient(120deg,var(--amber-hi),var(--amber)); border-color:transparent}
.course-tier.teal{color:var(--teal); border-color:rgba(67,189,178,.4)}
.course-card h3{font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:.6rem}
.course-card p{color:var(--muted); font-size:.92rem; font-weight:300; max-width:44ch}
.course-meta{margin-top:auto; padding-top:1.6rem; display:flex; gap:1.6rem; font-size:.8rem; color:var(--faint)}
.course-meta b{color:var(--text); font-weight:600}
.course-arrow{position:absolute; right:1.8rem; bottom:1.6rem; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--border-hi); color:var(--amber);
  transition:transform .35s var(--ease),background .3s,color .3s}
.course-card:hover .course-arrow{transform:rotate(-45deg); background:var(--amber); color:#231a0c}

.course-card.locked{cursor:default; opacity:.55}
.course-card.locked:hover{transform:none; box-shadow:none}
.course-card.locked .course-arrow{display:none}
.lock-badge{position:absolute; right:1.8rem; bottom:1.8rem; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; letter-spacing:.08em; color:var(--faint)}

/* ---- auth ---- */
.auth-wrap{min-height:100dvh; display:grid; place-items:center; padding:6rem 1rem 3rem}
.auth-card{width:min(430px,100%); padding:2.8rem 2.4rem; border-radius:var(--r-lg)}
.auth-card h1{font-size:2.1rem; margin:.4rem 0 .5rem}
.auth-card .sub{color:var(--muted); font-size:.9rem; font-weight:300; margin-bottom:2rem}
.field{margin-bottom:1.25rem}
.field label{display:block; font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.input-wrap{position:relative}
.input-wrap .lead-ico{position:absolute; left:1.05rem; top:50%; transform:translateY(-50%);
  color:var(--faint); pointer-events:none; display:grid; place-items:center; transition:color .25s}
.input-wrap:focus-within .lead-ico{color:var(--amber-hi)}
.field input{width:100%; min-height:52px; padding:.8rem 1.1rem .8rem 2.9rem; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:.98rem;
  transition:border-color .25s,background .25s,box-shadow .25s}
.field input:hover{border-color:var(--border-hi)}
.field input:focus{outline:none; border-color:rgba(217,162,75,.65); background:rgba(255,255,255,.05);
  box-shadow:0 0 0 4px rgba(217,162,75,.12)}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #201b16 inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 9999s ease-out}
.field .hint{font-size:.78rem; color:var(--faint); margin-top:.35rem}
.pw-wrap input{padding-right:3.1rem}
.pw-toggle{position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--faint); padding:.55rem; display:grid; place-items:center;
  cursor:pointer; border-radius:10px; transition:color .2s}
.pw-toggle:hover,.pw-toggle:focus-visible{color:var(--amber-hi)}
.pw-toggle .eye-off{display:none}
.pw-toggle.showing .eye{display:none}
.pw-toggle.showing .eye-off{display:block}
.field .error{font-size:.8rem; color:var(--danger); margin-top:.35rem; display:none}
.field.invalid input{border-color:var(--danger)}
.field.invalid .error{display:block}
.form-msg{display:none; margin-bottom:1rem; padding:.8rem 1rem; border-radius:var(--r-sm); font-size:.85rem}
.form-msg.err{display:block; background:rgba(224,91,76,.12); border:1px solid rgba(224,91,76,.35); color:#F1A79E}
.form-msg.ok{display:block; background:rgba(67,189,178,.1); border:1px solid rgba(67,189,178,.35); color:#8EDBD5}
.auth-link{text-align:center; margin-top:1.2rem; font-size:.86rem; color:var(--muted)}
.auth-link a{color:var(--amber-hi); border-bottom:1px solid rgba(239,192,118,.35)}
.auth-link a:hover,.auth-link a:focus-visible{border-color:var(--amber-hi)}
.code-input{font-variant-numeric:tabular-nums; letter-spacing:.45em; font-size:1.15rem!important; font-weight:600}

/* ---- страница курса ---- */
.course-hero{padding:9.5rem 0 3.5rem}
.progress-line{height:4px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:1.6rem}
.progress-line i{display:block; height:100%; width:var(--p,0%); border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--amber)); transition:width .8s var(--ease)}
.player{aspect-ratio:16/9; border-radius:var(--r-lg); border:1px solid var(--border);
  background:linear-gradient(160deg,#191510,#0f1c1a); display:grid; place-items:center; position:relative; overflow:hidden}
.player video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.play-badge{width:84px;height:84px;border-radius:50%; display:grid; place-items:center;
  background:rgba(217,162,75,.14); border:1px solid rgba(217,162,75,.5); color:var(--amber-hi);
  backdrop-filter:blur(6px); transition:transform .3s var(--ease)}
.player:hover .play-badge{transform:scale(1.08)}
.modules{display:flex; flex-direction:column; gap:.9rem; margin-top:2.5rem}
.module{border-radius:var(--r-md)}
.module>summary{list-style:none; display:flex; align-items:center; gap:1.1rem; padding:1.2rem 1.5rem; cursor:pointer; user-select:none}
.module>summary::-webkit-details-marker{display:none}
.module .num{font-family:var(--font-display); font-size:1.5rem; color:var(--faint); width:2ch; flex:none}
.module .m-title{font-weight:600; font-size:1.02rem}
.module .m-count{margin-left:auto; font-size:.78rem; color:var(--faint); flex:none}
.module .chev{flex:none; color:var(--muted); transition:transform .3s var(--ease)}
.module[open] .chev{transform:rotate(180deg)}
.module[open]>summary .m-title{color:var(--amber-hi)}
.lessons{padding:.2rem 1.5rem 1.2rem 4.1rem; display:flex; flex-direction:column}
.lesson{display:flex; align-items:center; gap:.9rem; padding:.7rem .9rem; margin-left:-.9rem; border-radius:var(--r-sm);
  font-size:.92rem; color:var(--muted); transition:background .2s,color .2s; cursor:pointer}
.lesson:hover{background:rgba(255,255,255,.04); color:var(--text)}
.lesson.active{color:var(--amber-hi); background:rgba(217,162,75,.08)}
.lesson svg{flex:none}
.lesson .dur{margin-left:auto; font-size:.75rem; color:var(--faint); font-variant-numeric:tabular-nums}
.lock{color:var(--faint)}

/* ---- reveal-анимации (GSAP подхватывает .reveal) ---- */
.reveal{opacity:0; transform:translateY(34px)}
.no-js .reveal{opacity:1; transform:none}

/* ---- футер ---- */
footer{border-top:1px solid var(--border); padding:2.2rem 0; margin-top:4rem}
.foot{display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; color:var(--faint); flex-wrap:wrap}

@media (max-width:860px){
  .courses-grid{grid-template-columns:1fr}
  .course-card,.course-card.wide,.course-card.narrow{grid-column:auto}
  .nav-links{display:none}
  .lessons{padding-left:1.5rem}
}

/* урок, для которого видео ещё не загружено */
.lesson.soon{opacity:.5; cursor:default}
.lesson.soon:hover{background:none}
.lesson .soon-tag{border:1px dashed var(--border-hi); border-radius:999px;
  padding:.1rem .5rem; font-size:.7rem; letter-spacing:.04em}