/* ==========================================================================
   Hasan Saqer — Elementor bridge + custom widget styling
   Loaded after style.css. Everything here styles markup this theme renders
   (the credit tables, video grid, press slider). Page layout itself is
   Elementor's, so it stays editable in the editor.
   ========================================================================== */

/* Elementor content sits full-bleed under the fixed header */
.elementor-page #hs-main > .elementor{width:100%}
#hs-main{overflow-x:clip}

/* ---------- Section head used across the custom widgets ---------- */
.hs-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.hs-sec-head h2{font-size:clamp(1.4rem,3vw,2rem);margin:0}
.hs-sec-head .hs-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3)}

/* ---------- Filter chips (filmography / media tabs) ---------- */
.hs-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.hs-tab{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line4);background:transparent;
  color:var(--muted2);cursor:pointer;transition:all .25s ease;display:inline-flex;gap:8px;align-items:center;
}
.hs-tab .hs-tab-n{color:var(--muted4);font-size:.66rem}
.hs-tab:hover{border-color:var(--lineHover);color:var(--ink)}
.hs-tab.hs-active{background:var(--chip);border-color:var(--gold);color:var(--ink)}
.hs-tab.hs-active .hs-tab-n{color:var(--gold)}

/* ---------- Credit / hosting / commercial tables ---------- */
.hs-group{margin-bottom:44px}
.hs-group:last-child{margin-bottom:0}
.hs-rows{border-top:1px solid var(--line)}
.hs-row{
  display:grid;gap:16px;align-items:baseline;
  grid-template-columns:78px 1.6fr 1.3fr 1.3fr;
  padding:var(--row-pad) 12px;border-bottom:1px solid var(--line3);
  transition:background .25s ease,border-color .25s ease;
}
.hs-row:nth-child(odd){background:var(--stripe1)}
.hs-row:hover{background:var(--stripe2);border-bottom-color:var(--lineHover)}
.hs-row .hs-y{font-family:var(--font-mono);font-size:.76rem;color:var(--gold);letter-spacing:.06em}
.hs-row .hs-t{color:var(--ink);font-weight:400}
.hs-row .hs-r{color:var(--muted);font-size:.92rem}
.hs-row .hs-p{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted3)}
.hs-rows[data-cols="3"] .hs-row{grid-template-columns:78px 1.8fr 1.2fr}
.hs-empty{padding:26px 12px;color:var(--muted3);font-family:var(--font-mono);font-size:.78rem}

/* ---------- Awards ---------- */
.hs-award{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:24px 12px;
  border-bottom:1px solid var(--line3);transition:background .25s ease}
.hs-award:hover{background:var(--stripe1)}
.hs-award .hs-y{font-family:var(--font-mono);font-size:.8rem;color:var(--gold)}
.hs-award h3{font-size:1.05rem;margin:0 0 6px;font-family:var(--font-body);font-weight:400;color:var(--ink)}
.hs-award p{margin:0;font-size:.9rem;color:var(--muted2)}

/* ---------- Video grid ---------- */
.hs-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hs-video{border:1px solid var(--line2);background:var(--panel);overflow:hidden;cursor:pointer;
  transition:border-color .3s ease,transform .3s ease}
.hs-video:hover{border-color:var(--gold);transform:translateY(-3px)}
.hs-video .hs-thumb{position:relative;padding-top:56.25%;background:var(--stripe2);overflow:hidden}
.hs-video .hs-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease,filter .4s ease;filter:saturate(.7)}
.hs-video:hover .hs-thumb img{transform:scale(1.05);filter:none}
.hs-video .hs-noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:16px;
  background:linear-gradient(160deg,var(--stripe2),var(--panel))}
.hs-video .hs-noimg b{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);font-weight:400}
.hs-video .hs-noimg span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3)}
.hs-video .hs-play{position:absolute;left:14px;bottom:14px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(0,0,0,.55);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.hs-video .hs-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px}
.hs-video .hs-meta b{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:.98rem}
.hs-video .hs-meta span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted3)}
@media(max-width:1024px){.hs-videos{grid-template-columns:repeat(2,1fr)}}

/* ---------- Press slider ---------- */
.hs-press{border:1px solid var(--line2);background:var(--panel);padding:34px}
.hs-press .hs-src{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.hs-press blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.6rem);
  line-height:1.45;color:var(--ink2)}
.hs-press .hs-press-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.hs-press .hs-press-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line4);
  background:transparent;color:var(--muted2);cursor:pointer}
.hs-press .hs-press-nav button:hover{border-color:var(--gold);color:var(--gold)}
.hs-press .hs-press-count{font-family:var(--font-mono);font-size:.72rem;color:var(--muted3)}

/* ---------- Skill bars ---------- */
.hs-skill{margin-bottom:18px}
.hs-skill .hs-skill-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.hs-skill .hs-skill-top b{font-weight:400;color:var(--ink);font-size:.94rem}
.hs-skill .hs-skill-top span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted3)}
.hs-skill .hs-bar{height:2px;background:var(--line2)}
.hs-skill .hs-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width 1.1s cubic-bezier(.2,.7,.3,1)}

/* ---------- Marquee ---------- */
.hs-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.hs-marquee-track{display:flex;gap:44px;width:max-content;animation:hs-marquee 34s linear infinite}
.hs-marquee:hover .hs-marquee-track{animation-play-state:paused}
.hs-marquee span{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted3);white-space:nowrap}
.hs-marquee span::after{content:'·';margin-left:44px;color:var(--gold)}
@keyframes hs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Stat counters ---------- */
.hs-stat .hs-n{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--ink);line-height:1}
.hs-stat .hs-l{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3);margin-top:8px;display:block}

/* ---------- Vitals ---------- */
.hs-vitals{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.hs-vitals div{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line3)}
.hs-vitals span:first-child{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted3)}
.hs-vitals span:last-child{color:var(--ink2);font-size:.9rem}

/* ---------- Contact form (CF7) ---------- */
.hs-form .wpcf7 p{margin:0}
.hs-form .wpcf7 br{display:none}
.hs-form label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3);margin:18px 0 8px}
.hs-form input[type=text],.hs-form input[type=email],.hs-form textarea,.hs-form select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line4);
  color:var(--ink);font-family:var(--font-body);font-size:1rem;padding:10px 2px;
  transition:border-color .3s ease}
.hs-form input:focus,.hs-form textarea:focus,.hs-form select:focus{outline:none;border-bottom-color:var(--gold)}
.hs-form textarea{min-height:120px;resize:vertical}
.hs-form input[type=submit]{
  margin-top:26px;background:transparent;border:1px solid var(--gold);color:var(--gold);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 32px;border-radius:999px;cursor:pointer;transition:all .3s ease;width:auto}
.hs-form input[type=submit]:hover{background:var(--gold);color:var(--bg)}
.hs-form .wpcf7-not-valid-tip{color:#e08a72;font-family:var(--font-mono);font-size:.7rem;margin-top:6px}
.hs-form .wpcf7-response-output{border-color:var(--line4)!important;color:var(--muted);
  font-family:var(--font-mono);font-size:.76rem;margin:22px 0 0!important;padding:12px 16px!important}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hs-row{grid-template-columns:64px 1fr;row-gap:6px}
  .hs-row .hs-r,.hs-row .hs-p{grid-column:2}
  .hs-rows[data-cols="3"] .hs-row{grid-template-columns:64px 1fr}
  .hs-award{grid-template-columns:70px 1fr;gap:14px}
  .hs-videos{grid-template-columns:1fr}
  .hs-vitals{grid-template-columns:1fr}
  .hs-press{padding:24px}
}

/* ==========================================================================
   v1.1 — hero composition, motion, cursor, client logos
   ========================================================================== */

/* ---------- Custom cursor (fine pointers only) ---------- */
#hs-cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:9998;opacity:0;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .3s ease,background .25s ease,border-color .25s ease;
  will-change:transform;
}
#hs-cursor.hs-hot{background:rgba(217,178,113,.16)}
@media (pointer:coarse){#hs-cursor{display:none}}
html.hs-has-cursor,html.hs-has-cursor a,html.hs-has-cursor button,
html.hs-has-cursor [data-hover]{cursor:none}

/* ---------- Gold page-transition curtain ---------- */
#hs-curtain{position:fixed;inset:0;z-index:9997;background:var(--gold);transform:scaleY(0);
  transform-origin:bottom;pointer-events:none}
#hs-curtain.hs-run{animation:hs-curtain .84s cubic-bezier(.7,0,.3,1) forwards}
@keyframes hs-curtain{
  0%{transform:scaleY(0);transform-origin:bottom}
  45%{transform:scaleY(1);transform-origin:bottom}
  46%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:top}
}

/* ---------- Ghost outline headline ---------- */
.hs-ghost{
  position:absolute;right:-1%;top:5%;z-index:0;max-width:72%;text-align:right;
  pointer-events:none;user-select:none;line-height:.8;letter-spacing:-.02em;
}
.hs-ghost .elementor-heading-title{
  font-family:var(--font-display);font-size:clamp(62px,10.5vw,168px);
  color:transparent;-webkit-text-stroke:1px rgba(217,178,113,.13);
}
#hero,#top,.hs-has-ghost{position:relative}
#hero > .e-con-inner > .e-con{position:relative;z-index:1}
@media(max-width:900px){.hs-ghost{display:none}}

/* ---------- Hero media composition ---------- */
.hs-heromedia{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:end}
.hs-heromedia .hs-portrait{position:relative;aspect-ratio:4/5;border:1px solid var(--line2);
  overflow:hidden;background:var(--panel)}
.hs-heromedia .hs-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hs-heromedia .hs-portrait:hover img{transform:scale(1.04)}
.hs-heromedia .hs-side{display:flex;flex-direction:column;gap:14px}
.hs-heromedia .hs-filmcard{position:relative;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--line2);cursor:pointer}
.hs-heromedia .hs-filmcard img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.hs-heromedia .hs-filmcard:hover img{transform:scale(1.08);filter:none}
.hs-heromedia .hs-filmcard span{position:absolute;inset:auto 0 0 0;padding:12px;
  background:linear-gradient(transparent,rgba(11,10,9,.9));
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#f3eee6}
.hs-heromedia .hs-badge{border:1px solid var(--line2);background:var(--panel);padding:16px}
.hs-heromedia .hs-badge b{display:block;font-family:var(--font-display);font-size:34px;
  line-height:1;color:var(--gold);font-weight:400}
.hs-heromedia .hs-badge span{display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-top:8px;line-height:1.5}
@media(max-width:600px){
  .hs-heromedia{grid-template-columns:1fr}
  .hs-heromedia .hs-side{flex-direction:row}
  .hs-heromedia .hs-side>*{flex:1}
}

/* ---------- Typewriter ---------- */
.hs-typewriter{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted2);font-size:.78rem}
.hs-typewriter i{font-style:normal;color:var(--gold)}
.hs-typewriter::after{content:'';display:inline-block;width:8px;height:1em;
  background:var(--gold);margin-left:4px;vertical-align:-.14em;animation:hs-caret 1s steps(1) infinite}
@keyframes hs-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- Client logo marquee ---------- */
.hs-logos{overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hs-logos-track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:hs-marquee 40s linear infinite}
.hs-logos:hover .hs-logos-track{animation-play-state:paused}
.hs-logos-item{display:flex;align-items:center;justify-content:center;height:52px;flex:0 0 auto}
.hs-logos-item img{max-height:44px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1) brightness(1.6);opacity:.55;transition:filter .35s ease,opacity .35s ease}
.hs-logos-item:hover img{filter:none;opacity:1}
html[data-hs-theme="light"] .hs-logos-item img{filter:grayscale(1) brightness(.4);opacity:.6}
html[data-hs-theme="light"] .hs-logos-item:hover img{filter:none;opacity:1}
.hs-logos-item b{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted3);font-weight:400;white-space:nowrap;
  transition:color .3s ease}
.hs-logos-item:hover b{color:var(--gold)}

/* ---------- Motion polish shared across the site ---------- */
.hs-row{transition:background .25s ease,border-color .25s ease,padding-left .32s cubic-bezier(.2,.8,.2,1)}
.hs-row:hover{padding-left:22px}
.hs-award{transition:background .25s ease,padding-left .32s cubic-bezier(.2,.8,.2,1)}
.hs-award:hover{padding-left:22px}
.hs-stat{border-left:1px solid var(--line2);padding-left:18px}
[id^="hs-svc-"],[id^="hs-pack-"],[id^="hs-hl-"]{
  transition:border-color .35s ease,transform .5s cubic-bezier(.2,.8,.2,1),background .35s ease}
[id^="hs-svc-"]:hover,[id^="hs-pack-"]:hover,[id^="hs-hl-"]:hover{
  border-color:var(--lineHover)!important;transform:translateY(-6px)}
.elementor-widget-image img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hs-zoom:hover img{transform:scale(1.04)}
.hs-video{transition:border-color .3s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.elementor-button{transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease!important}
.elementor-button:hover{transform:translateY(-2px)}

/* Parallax targets: class hs-par-N moves at N/100 of scroll. */
[class*="hs-par-"]{will-change:transform}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  .hs-marquee-track,.hs-logos-track{animation:none}
  #hs-cursor,#hs-curtain{display:none}
  [class*="hs-par-"]{transform:none!important}
}