/* =========================================================
   Ya Madhir's Marketing | base.css
   Design tokens, reset, header, footer and the components
   every page shares. Each page loads this first, then its
   own stylesheet (index.css, about.css, and so on).
   ========================================================= */

/* ---------- Fonts (self-hosted, both SIL Open Font License) ---------- */
@font-face{
  font-family:'Oswald';
  src:url('../assets/fonts/oswald-latin-wght-normal.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Bebas Neue';
  src:url('../assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* palette from the landing page */
  --black:#000000;
  --ember-1:#2a0000;
  --ember-2:#7a0f0f;
  --ember-3:#c81e1e;
  --ember-4:#ff4d3d;
  --gold:#f3d16a;
  --gold-dim:#8a7332;

  /* reading colours for longer copy, warmed to sit with the gold */
  --bone:#e8dfc8;
  --bone-dim:#b3a88c;

  --line:rgba(255,77,61,.22);
  --line-strong:rgba(255,77,61,.5);
  --panel:rgba(42,0,0,.42);
  --glow-sm:0 0 20px rgba(255,77,61,.4);
  --glow-md:0 0 30px rgba(255,77,61,.65);

  --display:'Bebas Neue',Impact,'Arial Narrow Bold','Arial Narrow',sans-serif;
  --body:'Oswald','Arial Narrow',Arial,sans-serif;

  --gutter:clamp(20px,5vw,56px);
  --max:1200px;
  --nav-h:86px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  background:var(--black);
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  position:relative;
  min-height:100vh;
  background:var(--black);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{ display:block; max-width:100%; }
ul{ list-style:none; }
a{ color:var(--ember-4); text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--ember-3); color:#fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--gold);
  line-height:.98;
  letter-spacing:.025em;
}
h2{ font-size:clamp(2.5rem,5.4vw,4.4rem); }
h3{ font-size:clamp(1.7rem,2.6vw,2.15rem); }
p{ max-width:62ch; }

/* ---------- Layout helpers ---------- */
.container{
  width:min(var(--max), 100% - 2 * var(--gutter));
  margin-inline:auto;
}

.section{ padding-block:clamp(72px,10vw,132px); }

.section-head{
  max-width:780px;
  margin-bottom:clamp(36px,5vw,64px);
}
.section-head p{ margin-top:20px; }

.skip-link{
  position:absolute;
  left:12px;
  top:-64px;
  z-index:100;
  padding:10px 20px;
  border-radius:999px;
  background:var(--gold);
  color:#100000;
  font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Ember canvas (drawn by base.js) ---------- */
#embers{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
main,
.site-footer{ position:relative; z-index:1; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
}

/* frosted layer sits on a pseudo-element so the header itself never
   becomes a containing block for the mobile menu overlay */
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.site-header.is-scrolled::before{ opacity:1; }

.nav{
  position:relative;
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:22px var(--gutter);
  transition:padding .3s ease;
}
.site-header.is-scrolled .nav{ padding-block:14px; }

.nav-brand{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.nav-brand img{
  width:46px;
  height:42px;
  object-fit:contain;
}
.nav-brand span{
  font-family:var(--display);
  font-size:1.0625rem;
  letter-spacing:2px;
  color:var(--gold);
  white-space:nowrap;
}

.nav-main{
  display:flex;
  flex:1;
  justify-content:center;
}
.nav-links{
  display:flex;
  gap:clamp(18px,3vw,44px);
}
.nav-links a{
  position:relative;
  display:inline-block;
  padding-bottom:4px;
  color:var(--ember-4);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(255,77,61,.45);
  transition:color .25s ease, text-shadow .25s ease;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--ember-4);
  transition:width .3s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  color:var(--gold);
  text-shadow:0 0 16px rgba(255,77,61,.75);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ width:100%; }

.nav-links-cta{ display:none; }

.nav-cta{
  flex-shrink:0;
  padding:11px 26px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--ember-4) 0%,var(--ember-3) 60%,var(--ember-2) 100%);
  color:#100000;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  box-shadow:0 0 20px rgba(255,77,61,.4);
  white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(255,77,61,.65);
}

.nav-toggle{
  position:relative;
  z-index:2;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:46px;
  height:46px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:1.5px;
  background:var(--ember-4);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }

  .nav-links{
    position:fixed;
    inset:0;
    z-index:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:90px var(--gutter) 40px;
    background:radial-gradient(circle at 50% 35%, rgba(122,15,15,.4), transparent 62%), #000;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; }

  .nav-links li{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .nav-links.is-open li{
    opacity:1;
    transform:none;
    transition-delay:calc(var(--i,0) * 60ms + 120ms);
  }
  .nav-links a{
    font-family:var(--display);
    font-size:clamp(2.4rem,10vw,3.2rem);
    font-weight:400;
    letter-spacing:4px;
    padding:6px 0;
  }
  .nav-links-cta{ display:block; margin-top:22px; }
  .nav-links .btn{
    font-family:var(--body);
    font-size:.875rem;
    font-weight:600;
    letter-spacing:2px;
    padding:17px 40px;
    color:#100000;
    text-shadow:none;
  }
  .nav-links .btn::after{ display:none; }
}

body.menu-open{ overflow:hidden; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-block;
  padding:17px 40px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--body);
  font-size:.875rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:2px;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  background:linear-gradient(180deg,var(--ember-4) 0%,var(--ember-3) 60%,var(--ember-2) 100%);
  color:#100000;
  box-shadow:0 0 24px rgba(255,77,61,.45);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 0 34px rgba(255,77,61,.7);
}
.btn-secondary{
  background:transparent;
  color:var(--ember-4);
  border-color:rgba(255,77,61,.55);
  text-shadow:0 0 10px rgba(255,77,61,.4);
}
.btn-secondary:hover{
  background:rgba(122,15,15,.25);
  transform:translateY(-3px);
  box-shadow:0 0 24px rgba(200,30,30,.4);
}
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(56px,9vw,118px) 0 clamp(48px,7vw,88px);
}
.page-hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ember-3),transparent);
  opacity:.7;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{
  max-width:16ch;
  font-size:clamp(2.8rem,6.8vw,5.6rem);
  text-shadow:0 0 38px rgba(255,77,61,.22);
}
.page-hero p{
  margin-top:26px;
  max-width:52ch;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
}
.page-hero-mark{
  position:absolute;
  right:max(-3%,-50px);
  top:50%;
  width:min(560px,56vw);
  opacity:.2;
  transform:translateY(-50%);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  animation:breatheMark 6s ease-in-out infinite;
}
@media (max-width:700px){
  .page-hero-mark{ opacity:.13; right:-30%; width:96vw; }
}

/* =========================================================
   SHARED COMPONENTS
   ========================================================= */

/* top rule that draws itself when scrolled into view */
.rule{ border-top:1px solid var(--line); }

/* tag pills */
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tags li{
  padding:6px 16px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--ember-4);
  font-size:.8125rem;
  font-weight:400;
  letter-spacing:.08em;
}

/* portfolio tile: art on top, caption underneath (used on Home and Portfolio) */
.tile{ display:block; }
.tile-art{
  position:relative;
  aspect-ratio:5/4;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#000;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.tile-art svg{
  width:100%;
  height:100%;
  transition:transform 1s var(--ease);
}
.tile:hover .tile-art{
  border-color:var(--line-strong);
  box-shadow:var(--glow-sm);
}
.tile:hover .tile-art svg{ transform:scale(1.06); }
.tile-art text{ font-family:var(--display); }
.tile-tag{
  display:inline-block;
  margin-top:18px;
  padding:3px 12px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--ember-4);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.6;
}
.tile h3{ margin-top:12px; }
.tile p{ margin-top:8px; color:var(--bone-dim); font-size:1rem; }

/* closing call to action */
.cta-band{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding-block:clamp(80px,11vw,150px);
}
.cta-band::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:min(1100px,140%);
  aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(200,30,30,.32),rgba(122,15,15,.12) 55%,transparent 100%);
  pointer-events:none;
  animation:glowPulse 5s ease-in-out infinite;
}
.cta-band .container{ position:relative; }
.cta-band h2{
  font-size:clamp(2.8rem,7vw,5.6rem);
  text-shadow:0 0 40px rgba(255,77,61,.28);
}
.cta-band p{ margin:22px auto 36px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  padding:clamp(56px,8vw,88px) 0 32px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(42,0,0,.35),rgba(0,0,0,.85) 60%);
}
.site-footer::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ember-4),transparent);
  opacity:.6;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,56px);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.footer-brand img{ width:52px; height:47px; object-fit:contain; }
.footer-brand span{
  font-family:var(--display);
  font-size:1.25rem;
  letter-spacing:2px;
  color:var(--gold);
}
.footer-col p{ color:var(--bone-dim); font-size:.9375rem; max-width:32ch; }
.footer-col h4{
  margin-bottom:14px;
  font-size:1.3rem;
  letter-spacing:.12em;
}
.footer-col li{ margin-bottom:8px; color:var(--bone-dim); font-size:.9375rem; }
.footer-col a{ color:var(--bone-dim); transition:color .2s ease; }
.footer-col a:hover{ color:var(--gold); }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:clamp(36px,5vw,56px);
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--gold-dim);
  font-size:.6875rem;
  letter-spacing:2px;
  text-transform:uppercase;
}
.social-row{ display:flex; gap:10px; }
.social-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--ember-4);
  transition:box-shadow .25s ease, color .25s ease, transform .25s ease;
}
.social-row a:hover{
  color:var(--gold);
  box-shadow:var(--glow-sm);
  transform:translateY(-2px);
}

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid .footer-col:first-child{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* =========================================================
   MOTION
   ========================================================= */
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.055); }
}
@keyframes breatheMark{
  0%,100%{ transform:translateY(-50%) scale(1); }
  50%{ transform:translateY(-50%) scale(1.05); }
}
@keyframes glowPulse{
  0%,100%{ opacity:.65; }
  50%{ opacity:1; }
}
@keyframes navIn{
  to{ opacity:1; transform:none; }
}
@keyframes fadeUp{
  to{ opacity:1; transform:none; }
}

/* scroll reveal: elements start hidden only when JS is running */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 100ms);
}
.js [data-reveal="left"]{ transform:translateX(-28px); }
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal].is-visible{ opacity:1; transform:none; }

/* rule variant: content stays put, the line above it draws in */
.js [data-reveal="rule"]{
  position:relative;
  opacity:1;
  transform:none;
  border-top-color:transparent;
}
.js [data-reveal="rule"]::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--ember-4),var(--line) 55%,transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--ease);
  transition-delay:calc(var(--d,0) * 100ms);
}
.js [data-reveal="rule"].is-visible::before{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  html{ scroll-behavior:auto; }
  .js [data-reveal],
  .js body[data-intro] .nav,
  .js body[data-intro] [data-intro-item]{
    opacity:1 !important;
    transform:none !important;
  }
  .js [data-reveal="rule"]::before{ transform:scaleX(1) !important; }
  #embers{ display:none; }
}