/*
Theme Name: Ýel Aýdymlary
Theme URI: https://turkmenartist.com
Author: Begenj Taghanpour
Description: Begenj Taghanpour — animasiýa, surat we saz. Üç dilli şahsy portfolio temasy.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yel
*/

:root{
  --ink:#0D0908;
  --kirmiz:#7A1D14;
  --kirmiz-deep:#4A120C;
  --sut:#F0E4CC;
  --kumus:#9E8B73;
  --hakyk:#D3762F;
  --pad:clamp(1.1rem,4.5vw,4.5rem);
  --maxw:1440px;
  --bar:52px;
  --f:'Archivo',system-ui,sans-serif;
  --f-verse:'EB Garamond',Georgia,serif;
  --f-fa:'Vazirmatn',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--ink);color:var(--sut);line-height:1.65;
  overflow-x:hidden;padding-block-end:var(--bar)}
:lang(fa){font-family:var(--f-fa);line-height:1.9}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--hakyk);outline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.lbl{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
:lang(fa) .lbl{letter-spacing:0;font-size:.85rem}
.h2{font-size:clamp(1.7rem,4.2vw,2.9rem);font-weight:700;line-height:1.1;margin-block:.4rem 0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--sut);color:var(--ink);padding:.6rem 1rem}

/* ── header ── */
.site-head{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;display:flex;
  align-items:center;gap:1.2rem;padding:.8rem var(--pad);
  border-block-end:1px solid transparent;transition:background .4s,border-color .4s}
.site-head.stuck{background:rgba(13,9,8,.94);backdrop-filter:blur(10px);
  border-block-end-color:rgba(240,228,204,.13)}
.mark{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.mark svg{width:26px;height:26px}
.mark b{font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
:lang(fa) .mark b{letter-spacing:0}
.site-nav{margin-inline-start:auto;display:flex;gap:1.5rem;align-items:center}
.site-nav a{font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  color:#CDBEA6;position:relative;padding-block:.3rem;transition:color .25s}
:lang(fa) .site-nav a{letter-spacing:0;font-size:.92rem}
.site-nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:0;
  height:1px;background:var(--hakyk);transition:width .3s}
.site-nav a:hover{color:var(--sut)} .site-nav a:hover::after{width:100%}
.langs{display:flex;gap:.14rem;margin-inline-start:.9rem}
.langs button{font-size:.68rem;letter-spacing:.1em;font-weight:600;padding:.28rem .46rem;
  border:1px solid rgba(240,228,204,.22);color:var(--kumus);transition:.22s}
.langs button[aria-pressed="true"]{background:var(--sut);color:var(--ink);border-color:var(--sut)}
.langs button:hover{color:var(--sut)}
.langs button[aria-pressed="true"]:hover{color:var(--ink)}

/* ── hero ── */
.stage{height:250vh;position:relative}
.stage-fix{position:sticky;inset-block-start:0;height:100svh;overflow:hidden;
  background:var(--kirmiz-deep);display:grid;place-items:center}
.aperture{position:absolute;inset:0;will-change:clip-path}
.aperture video{width:100%;height:100%;object-fit:cover;display:block}
.veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  rgba(13,9,8,.5),rgba(13,9,8,.1) 34%,rgba(13,9,8,.14) 60%,rgba(13,9,8,.82))}
.ring{position:absolute;pointer-events:none;opacity:0;transition:opacity .5s}
.stage-copy{position:absolute;inset-inline:0;inset-block-end:0;z-index:3;text-align:center;
  padding:0 var(--pad) clamp(2rem,7vh,4.5rem);display:grid;justify-items:center;gap:.9rem}
.stage-copy h1{font-size:clamp(1.9rem,7vw,5.4rem);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;line-height:.95}
:lang(fa) .stage-copy h1{letter-spacing:0;text-transform:none;font-weight:600;line-height:1.25}
.roles{color:var(--kumus);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase}
:lang(fa) .roles{letter-spacing:.08em;font-size:.88rem}
.thesis{font-family:var(--f-verse);font-style:italic;font-size:clamp(1.15rem,3vw,2rem);
  color:#EBDCC0;opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
:lang(fa) .thesis{font-family:var(--f-fa);font-style:normal}
.thesis.on{opacity:1;transform:none}
.cue{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--kumus);
  display:grid;justify-items:center;gap:.45rem;transition:opacity .4s}
:lang(fa) .cue{letter-spacing:0}
.cue i{width:1px;height:30px;background:linear-gradient(var(--kumus),transparent)}

/* ── statement ── */
.statement{background:var(--kirmiz);padding-block:clamp(3.5rem,9vw,6.5rem)}
.statement p{font-size:clamp(1.2rem,2.7vw,1.95rem);line-height:1.5;max-width:30ch;font-weight:500}
:lang(fa) .statement p{max-width:38ch;font-size:clamp(1.05rem,2.3vw,1.6rem)}
.statement .lbl{color:rgba(240,228,204,.62)}

/* ── sections ── */
.sec{padding-block:clamp(3rem,8vw,6rem)}
.sec-head{display:flex;align-items:flex-end;gap:1.2rem;margin-block-end:1.4rem}
.sec-head .n{font-family:var(--f-verse);font-size:1rem;color:var(--hakyk);letter-spacing:.1em}
.sec-head .count{margin-inline-start:auto;font-size:.66rem;letter-spacing:.16em;color:#6B5B4B}
:lang(fa) .sec-head .count{letter-spacing:0}
.sec-empty{border:1px dashed rgba(240,228,204,.22);padding:2.2rem 1.4rem;text-align:center;
  color:var(--kumus);font-size:.85rem}

/* ── justified gallery ── */
.gal{display:grid;gap:var(--gg,10px)}
.grow{display:flex;gap:var(--gg,10px)}
.item{position:relative;overflow:hidden;background:#160F0D;flex-shrink:0;
  border:1px solid rgba(240,228,204,.1);transition:border-color .3s}
.item:hover{border-color:rgba(211,118,47,.6)}
.item video,.item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.item:hover video,.item:hover img{transform:scale(1.035)}
.item .blank{position:absolute;inset:0;display:grid;place-items:center;
  background-image:linear-gradient(rgba(13,9,8,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,228,204,.07) 1px,transparent 1px);
  background-size:9px 9px}
.item .blank svg{width:34%;height:34%;opacity:.5}
.item .cap{position:absolute;inset-inline:0;inset-block-end:0;padding:2.2rem .8rem .7rem;
  background:linear-gradient(transparent,rgba(10,6,5,.9));
  opacity:0;transform:translateY(8px);transition:.35s;pointer-events:none}
.item:hover .cap,.item:focus-within .cap{opacity:1;transform:none}
.item .cap h3{font-size:.9rem;font-weight:600;line-height:1.3}
.item .cap .r{font-size:.58rem;letter-spacing:.16em;color:var(--kumus);text-transform:uppercase}
:lang(fa) .item .cap .r{letter-spacing:0;font-size:.72rem}
.item .hit{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.item .pl{position:absolute;inset-block-start:.55rem;inset-inline-start:.55rem;z-index:1;
  font-size:.56rem;letter-spacing:.14em;background:rgba(10,6,5,.72);color:var(--hakyk);
  padding:.26rem .48rem;text-transform:uppercase;font-weight:600}
:lang(fa) .item .pl{letter-spacing:0;font-size:.7rem}
@media(max-width:640px){
  .grow{flex-direction:column}
  .item{width:100% !important;height:auto !important}
  .item .cap{opacity:1;transform:none}
}

/* ── music ── */
.music{background:var(--kirmiz-deep)}
.music-grid{display:grid;gap:clamp(1.4rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:900px){.music-grid{grid-template-columns:.8fr 1.2fr;align-items:start}}
.music .lede{max-width:40ch;color:#E4D5B9;margin-block-start:1rem}
.tracks{border-block-start:1px solid rgba(240,228,204,.18)}
.trow{display:flex;align-items:center;gap:1rem;width:100%;text-align:start;padding-block:1rem;
  border-block-end:1px solid rgba(240,228,204,.18);transition:padding-inline .3s}
.trow:hover{padding-inline-start:.55rem}
.knot{flex-shrink:0;width:22px;height:22px;border:1px solid var(--kumus);position:relative;
  transform:rotate(45deg);transition:.3s}
.knot::after{content:"";position:absolute;inset:5px;background:var(--kumus);transition:.3s}
.trow:hover .knot{border-color:var(--hakyk)}
.trow[aria-current="true"] .knot{border-color:var(--hakyk);transform:rotate(45deg) scale(1.15)}
.trow[aria-current="true"] .knot::after{background:var(--hakyk)}
.tname{flex:1;font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:500}
.tyear{font-size:.68rem;letter-spacing:.16em;color:var(--kumus)}
:lang(fa) .tyear{letter-spacing:0}
.stream{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-start:1.4rem}
.stream a{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(240,228,204,.28);padding:.48rem .9rem;transition:.25s}
:lang(fa) .stream a{letter-spacing:0;font-size:.82rem}
.stream a:hover{background:var(--sut);color:var(--ink);border-color:var(--sut)}

/* ── about / contact ── */
.about-grid{display:grid;gap:clamp(1.6rem,4vw,3.5rem);grid-template-columns:1fr}
@media(min-width:900px){.about-grid{grid-template-columns:.62fr 1.38fr}}
.about-grid p{color:#DCCCB0;max-width:52ch}.about-grid p+p{margin-block-start:1rem}
.portrait{aspect-ratio:9/16;background:#160F0D;display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(240,228,204,.12);
  background-image:linear-gradient(rgba(13,9,8,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,228,204,.07) 1px,transparent 1px);
  background-size:9px 9px}
.portrait svg{width:40%;height:40%;opacity:.5}
.portrait img{width:100%;height:100%;object-fit:cover}
.contact{background:var(--kirmiz);padding-block:clamp(3.5rem,9vw,6.5rem);text-align:center}
.mail{display:inline-block;font-family:var(--f-verse);font-style:italic;
  font-size:clamp(1.3rem,4vw,2.4rem);border-block-end:1px solid var(--hakyk);
  padding-block-end:.15rem;margin-block:.6rem 1.8rem}
:lang(fa) .mail{font-family:var(--f-fa);font-style:normal;direction:ltr}
.socials{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.socials a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(240,228,204,.72);transition:color .25s}
.socials a:hover{color:var(--sut)}
:lang(fa) .socials a{letter-spacing:0;font-size:.88rem}
.site-foot{padding:1.6rem var(--pad);text-align:center;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5E4E40}
:lang(fa) .site-foot{letter-spacing:0;font-size:.82rem}
.weft{height:22px;background-repeat:repeat-x;background-size:auto 22px}

/* ── lightbox ── */
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,3,3,.96);display:none;
  grid-template-rows:auto 1fr auto}
.lb[open]{display:grid}
.lb-bar{display:flex;align-items:center;gap:.9rem;padding:.7rem var(--pad);
  border-block-end:1px solid rgba(240,228,204,.12)}
.lb-bar .lbl{color:var(--kumus)}.lb-bar .sp{flex:1}
.lb-bar button{padding:.3rem .55rem;color:var(--kumus);transition:color .2s}
.lb-bar button:hover{color:var(--sut)}
.lb-stage{display:grid;place-items:center;padding:1rem var(--pad);min-height:0}
.lb-stage video,.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb-foot{padding:.9rem var(--pad) 1.4rem;display:flex;align-items:baseline;gap:.9rem}
.lb-foot h3{font-size:clamp(1rem,2.4vw,1.4rem);font-weight:600}
.lb-foot span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kumus)}
:lang(fa) .lb-foot span{letter-spacing:0;font-size:.78rem}

/* ── player ── */
.player{position:fixed;inset-block-end:0;inset-inline:0;z-index:70;height:var(--bar);
  background:#0A0605;border-block-start:1px solid rgba(240,228,204,.16);
  display:flex;align-items:center;gap:.85rem;padding-inline:var(--pad)}
.player .knot{width:20px;height:20px}.player .knot::after{inset:4.5px}
.pnow{flex:1;min-width:0;display:grid;gap:.05rem}
.pbrand{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--kumus)}
:lang(fa) .pbrand{letter-spacing:0;font-size:.72rem}
.ptitle{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pprog{flex:2;height:7px;display:none;cursor:pointer;
  background-image:radial-gradient(circle,rgba(240,228,204,.28) 1.1px,transparent 1.2px);
  background-size:7px 7px;background-position:center}
@media(min-width:760px){.pprog{display:block}}
.pprog i{display:block;height:100%;width:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--hakyk) 1.5px,transparent 1.6px);
  background-size:7px 7px;background-position:center;transition:width .2s linear}
.pnext{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kumus);
  flex-shrink:0;transition:color .2s}
.pnext:hover{color:var(--sut)}
:lang(fa) .pnext{letter-spacing:0;font-size:.78rem}

.rv{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv,.thesis{opacity:1;transform:none}
  .stage{height:auto}.stage-fix{position:relative}
}
@media(max-width:700px){.site-nav{display:none}.stage{height:200vh}}