/* ============================================================
   MÁTÉ TÖRÖK — portfolio homepage
   Same design system as the project pages, homepage variant.
   Tokens
   ============================================================ */
:root{
  --void:        #07070a;
  --void-2:      #0b0a0d;
  --gold:        #f2c14e;
  --gold-dim:    #4a3a15;
  --gold-glow:   rgba(242,193,78,.32);
  --ink:         #f4f2f0;
  --ink-dim:     #a8a3a0;
  --ink-faint:   #5c5754;
  --line:        rgba(244,242,240,.14);

  --tag-majka:   #4de8ff;
  --tag-sisi:    #ff5a33;
  --tag-xfactor: #ff2e9a;

  --display: "Space Grotesk", "Arial Narrow", sans-serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  --edge: clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--gold); color:var(--void); }

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-glow);
  flex:none;
}

.reveal{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .marquee__track{ animation:none !important; }
}

/* ============================================================
   HUD
   ============================================================ */
.hud{
  position:fixed; inset:0;
  z-index:40;
  pointer-events:none;
  padding:22px var(--edge);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--ink-dim);
  mix-blend-mode:difference;
}
.hud__brand{ display:flex; flex-direction:column; gap:2px; }
.hud__brand b{ color:var(--ink); font-weight:600; }
.hud__section{ text-align:right; display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.hud__bar{ width:96px; height:2px; background:var(--line); margin-top:6px; position:relative; }
.hud__bar i{
  position:absolute; left:0; top:0; height:100%;
  background:var(--gold); width:0%;
  transition:width .1s linear;
}

/* ============================================================
   Section shell
   ============================================================ */
.section{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--edge);
}
.section--pad{ padding-top:150px; padding-bottom:150px; }
.section--auto{ min-height:auto; padding-top:130px; padding-bottom:130px; }

.bg-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.bg-media img, .bg-media video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.bg-media::after{
  content:"";
  position:absolute; inset:0;
  background:var(--scrim, linear-gradient(180deg, rgba(7,7,10,.55) 0%, rgba(7,7,10,.4) 40%, rgba(7,7,10,.9) 100%));
}
.section > .content{ position:relative; z-index:1; width:100%; }

/* ============================================================
   HERO — showreel
   ============================================================ */
.hero{ padding-top:0; }
.hero .bg-media{ --scrim: linear-gradient(180deg, rgba(7,7,10,.3) 0%, rgba(7,7,10,.45) 55%, rgba(7,7,10,.96) 100%); }

.hero__content{ display:flex; flex-direction:column; gap:30px; padding-bottom:9vh; max-width:1200px; }
.hero__name{
  font-size:clamp(3rem, 10vw, 8rem);
  line-height:.94;
  letter-spacing:-.03em;
}
.hero__role{
  font-family:var(--mono); font-size:clamp(.85rem, 1.5vw, 1.05rem);
  color:var(--ink-dim); letter-spacing:.04em; max-width:52ch; line-height:1.6;
  border-left:2px solid var(--gold-dim); padding-left:18px;
}
.hero__role b{ color:var(--gold); font-weight:500; }

.scroll-cue{
  position:absolute; bottom:36px; left:var(--edge);
  font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); letter-spacing:.1em;
  display:flex; align-items:center; gap:10px;
}
.scroll-cue i{
  width:1px; height:34px; background:linear-gradient(var(--gold), transparent);
  display:block; animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

.sound-toggle{
  position:absolute; bottom:36px; right:var(--edge); z-index:2;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink);
  background:rgba(7,7,10,.4); border:1px solid var(--line);
  padding:10px 16px; cursor:pointer; pointer-events:auto;
  backdrop-filter:blur(6px);
}
.sound-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.sound-toggle i{ width:7px; height:7px; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); flex:none; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:var(--void); }
.about .bg-media{ --scrim: linear-gradient(100deg, rgba(7,7,10,.95) 20%, rgba(7,7,10,.65) 58%, rgba(7,7,10,.35) 100%); }
.about .eyebrow{ margin-bottom:26px; }
.about p{
  font-size:clamp(1.3rem, 2.1vw, 1.75rem);
  line-height:1.55; letter-spacing:-.005em; font-weight:400;
  max-width:900px; color:var(--ink);
}
.about p b{ color:var(--gold); font-weight:600; }

/* ============================================================
   SELECTED WORK — asymmetric grid
   ============================================================ */
.work{ background:var(--void-2); padding-top:130px; padding-bottom:130px; }
.work__head{ margin-bottom:56px; }
.work__head h2{ font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.02; letter-spacing:-.02em; max-width:16ch; }

.work__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.card{
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid var(--line);
  min-height:420px;
  text-decoration:none;
  color:var(--ink);
}
.card--feature{ grid-column:1 / -1; min-height:560px; }
.card__media{ position:absolute; inset:0; z-index:0; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,.8,.24,1); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,10,.15) 0%, rgba(7,7,10,.35) 55%, rgba(7,7,10,.92) 100%);
}
.card__body{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:36px;
  gap:14px;
}
.card__tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  display:inline-flex; align-items:center; gap:.6em; width:fit-content;
  color:var(--tag-color, var(--gold));
}
.card__tag::before{ content:""; width:7px; height:7px; background:var(--tag-color, var(--gold)); flex:none; }
.card--majka   { --tag-color: var(--tag-majka); }
.card--sisi    { --tag-color: var(--tag-sisi); }
.card--xfactor { --tag-color: var(--tag-xfactor); }

.card__title{ font-size:clamp(1.6rem, 3vw, 2.6rem); line-height:1.05; letter-spacing:-.02em; }
.card--feature .card__title{ font-size:clamp(2rem, 4.4vw, 3.6rem); }
.card__blurb{ font-size:1rem; line-height:1.5; color:var(--ink-dim); max-width:52ch; }
.card__cta{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em;
  display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--ink);
}
.card:hover .card__cta{ color:var(--tag-color, var(--gold)); }
.card__cta svg{ width:14px; height:14px; transition:transform .3s ease; }
.card:hover .card__cta svg{ transform:translate(3px,-3px); }

@media (max-width:820px){
  .work__grid{ grid-template-columns:1fr; }
  .card--feature{ min-height:480px; }
  .card{ min-height:380px; }
}

/* ============================================================
   MORE CREDITS — marquee
   ============================================================ */
.credits{ background:var(--void); padding-top:110px; padding-bottom:110px; overflow:hidden; }
.credits__head{ padding:0 var(--edge); margin-bottom:44px; }
.credits__head h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); letter-spacing:-.01em; max-width:20ch; }

.marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track{
  display:flex; gap:20px; width:max-content;
  animation:marqueeScroll 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.credit-tile{ position:relative; width:340px; height:220px; flex:none; overflow:hidden; border:1px solid var(--line); }
.credit-tile img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.credit-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(7,7,10,.9) 100%); }
.credit-tile span{
  position:absolute; left:16px; bottom:14px; z-index:1;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink);
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{ min-height:70vh; }
.contact .content{ max-width:980px; }
.contact__lead{ font-size:clamp(2rem, 5vw, 4rem); line-height:1.08; letter-spacing:-.02em; margin-top:22px; }

.contact__links{
  display:flex; flex-wrap:wrap; gap:20px 48px;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--line);
}
.contact__links a{
  font-family:var(--mono); font-size:1rem; letter-spacing:.02em;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.contact__links a:hover{ color:var(--gold); }
.contact__links a i{ width:7px; height:7px; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); flex:none; }

.footer{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; margin-top:64px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.76rem; color:var(--ink-dim); flex-wrap:wrap;
}
.footer b{ color:var(--ink); font-weight:500; }
.footer__back{ color:var(--gold); text-decoration:none; letter-spacing:.08em; }

@media (max-width:640px){
  .hud{ font-size:.6rem; padding:16px var(--edge); }
  .hud__bar{ width:60px; }
  .section{ padding-left:20px; padding-right:20px; }
  .sound-toggle{ bottom:88px; }
  .credit-tile{ width:260px; height:170px; }
}