/* ===========================================================
   Erickson Thole — cinematic dark portfolio
   =========================================================== */

:root{
  --bg:        oklch(0.16 0.006 60);
  --bg-elev:   oklch(0.21 0.008 60);
  --bg-elev-2: oklch(0.25 0.009 60);
  --ink:       oklch(0.96 0.004 80);
  --ink-dim:   oklch(0.72 0.006 70);
  --ink-faint: oklch(0.52 0.006 70);
  --line:      oklch(0.30 0.006 70);
  --accent:    oklch(0.80 0.155 65);
  --accent-press: oklch(0.72 0.15 60);

  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);            /* ease-out-expo-ish */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1500px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:5rem; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  letter-spacing:0.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:oklch(0.16 0.01 60); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* film grain + vignette overlay */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:0.045; mix-blend-mode:overlay;
}
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 55%, oklch(0.10 0.01 60 / 0.55) 100%);
}

/* ---------- sticky bar ---------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem var(--gutter);
  background:linear-gradient(oklch(0.13 0.01 60 / 0.92), oklch(0.13 0.01 60 / 0));
  backdrop-filter:blur(6px);
  transform:translateY(-100%);
  opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.bar.is-visible{ transform:none; opacity:1; }
.bar__mark{
  font-family:var(--display); font-size:1.05rem; letter-spacing:0.04em;
  text-transform:uppercase;
}
.bar__nav{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.25rem); }
.bar__nav a{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-dim); transition:color .25s; }
.bar__nav a:hover{ color:var(--ink); }
.bar__cta{
  color:var(--bg)!important; background:var(--accent);
  padding:0.5rem 1rem; border-radius:999px; font-weight:600;
}
.bar__cta:hover{ background:var(--accent-press); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(3rem,8vh,6rem);
  overflow:hidden;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; filter:saturate(1.05) contrast(1.03);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, var(--bg) 2%, oklch(0.14 0.01 60 / 0.2) 45%, oklch(0.14 0.01 60 / 0.55) 100%),
    linear-gradient(to right, oklch(0.12 0.01 60 / 0.6), transparent 55%);
}
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; }
.hero__eyebrow{
  font-size:clamp(0.7rem,1.6vw,0.85rem); text-transform:uppercase;
  letter-spacing:0.32em; color:var(--ink-dim); margin-bottom:clamp(1rem,2vw,1.4rem);
}
.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.5rem, 15vw, 12rem); line-height:0.86;
  letter-spacing:-0.01em; text-transform:uppercase;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span,
.hero__title .line{ will-change:transform; }
.hero__tag{
  font-size:clamp(1.05rem,2.4vw,1.5rem); color:var(--ink);
  margin-top:clamp(0.8rem,2vw,1.25rem); font-weight:500; letter-spacing:0.01em;
}
.hero__tag::before{ content:""; display:inline-block; width:2.2rem; height:1px; background:var(--accent); vertical-align:middle; margin-right:0.8rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:clamp(1.6rem,4vw,2.4rem); }
.hero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(3rem,8vh,6rem); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-size:0.66rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--ink-dim);
}
.hero__scroll svg{ animation:bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.6 } 50%{ transform:translateY(5px); opacity:1 } }

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.14em;
  padding:0.85rem 1.5rem; border-radius:999px; transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn--solid{ background:var(--accent); color:oklch(0.16 0.01 60); }
.btn--solid:hover{ background:var(--accent-press); transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ---------- work ---------- */
.work{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,12vh,9rem) var(--gutter) clamp(2rem,6vh,4rem); }
.work__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:clamp(2.5rem,6vw,4rem); }
.work__title{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2.5rem,7vw,5rem); line-height:0.9; letter-spacing:-0.01em; }
.work__sub{ color:var(--ink-dim); max-width:34ch; font-size:0.95rem; }

.band{ margin-bottom:clamp(3.5rem,8vw,6rem); }
.band__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); padding-bottom:0.9rem; }
.band__label{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.4rem,3.5vw,2.4rem); letter-spacing:0.01em; }
.band__note{ color:var(--ink-faint); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.16em; margin-left:auto; }

.tiles{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(0.6rem,1.4vw,1.1rem); }

.tile{
  position:relative; overflow:hidden; border-radius:6px;
  background:var(--bg-elev); cursor:pointer;
  grid-column:span 6;            /* default: half row (landscape) */
  aspect-ratio:16/9;
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.tile.is-in{ opacity:1; transform:none; }
.tile[data-orient="portrait"]{ grid-column:span 3; aspect-ratio:9/16; }
.tile.is-feature{ grid-column:span 8; }
.tile.is-feature[data-orient="portrait"]{ grid-column:span 4; }
.tile.is-solo[data-orient="landscape"]{ grid-column:span 12; aspect-ratio:21/9; }
.tile.is-solo[data-orient="portrait"]{ grid-column:span 4; }
/* fill rows when a band has only a few portrait pieces */
.tile.fill-2[data-orient="portrait"]{ grid-column:span 6; }
.tile.fill-3[data-orient="portrait"]{ grid-column:span 4; }

.tile__media{ position:absolute; inset:0; width:100%; height:100%; }
.tile__media img,
.tile__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease), opacity .5s ease;
}
.tile__media video{ opacity:0; }
.tile.is-preview .tile__media video{ opacity:1; }
.tile:hover .tile__media img{ transform:scale(1.04); }
.tile__shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, oklch(0.10 0.01 60 / 0.85) 0%, transparent 45%);
  opacity:0.75; transition:opacity .4s;
}
.tile:hover .tile__shade{ opacity:1; }
.tile__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(0.7rem,1.4vw,1.1rem); display:flex; align-items:flex-end; justify-content:space-between; gap:0.5rem; }
.tile__name{ font-size:clamp(0.95rem,1.6vw,1.15rem); font-weight:600; letter-spacing:0.01em; }
.tile__play{
  flex:none; width:2.5rem; height:2.5rem; border-radius:999px;
  display:grid; place-items:center; background:oklch(0.96 0.004 80 / 0.12);
  border:1px solid oklch(0.96 0.004 80 / 0.3); backdrop-filter:blur(3px);
  transform:scale(.85); opacity:0; transition:transform .4s var(--ease), opacity .4s, background .3s;
}
.tile:hover .tile__play,
.tile:focus-visible .tile__play{ transform:none; opacity:1; }
.tile__play:hover{ background:var(--accent); border-color:var(--accent); }
.tile__play svg{ margin-left:2px; }

/* ---------- about ---------- */
.about{
  max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,10vh,8rem) var(--gutter);
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem); align-items:center;
}
.about__media{ position:relative; }
.about__media img{ width:100%; border-radius:8px; filter:grayscale(1) contrast(1.05); }
.about__media::after{ content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 0 0 1px oklch(0.96 0.004 80 / 0.08); }
.about__title{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2rem,5vw,3.5rem); line-height:0.92; margin-bottom:1.4rem; }
.about__body p{ color:var(--ink-dim); max-width:60ch; margin-bottom:1rem; }
.creds{ list-style:none; margin:2rem 0 1.75rem; border-top:1px solid var(--line); }
.creds li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.5rem 1rem; padding:0.85rem 0; border-bottom:1px solid var(--line); }
.creds__role{ font-weight:600; letter-spacing:0.01em; }
.creds__meta{ color:var(--ink-faint); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.12em; align-self:center; }
.kit{ display:flex; flex-wrap:wrap; gap:0.5rem 1rem; align-items:baseline; margin-bottom:1.75rem; }
.kit__label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--accent); }
.kit__items{ color:var(--ink-dim); font-size:0.9rem; }
.about__resume{ display:inline-block; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.14em; border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color .25s; }
.about__resume:hover{ color:var(--accent); }

/* ---------- contact ---------- */
.contact{ text-align:center; padding:clamp(4rem,12vh,9rem) var(--gutter); border-top:1px solid var(--line); }
.contact__eyebrow{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.3em; color:var(--ink-dim); margin-bottom:1.25rem; }
.contact__email{
  display:inline-block; font-family:var(--display); font-weight:400; text-transform:none;
  font-size:clamp(1.75rem,7vw,5rem); line-height:1; letter-spacing:-0.005em;
  background:linear-gradient(transparent 82%, var(--accent) 0) no-repeat; background-size:0% 100%;
  transition:background-size .5s var(--ease), color .3s;
}
.contact__email:hover{ background-size:100% 100%; }
.contact__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,4vw,2.5rem); margin-top:2.25rem; }
.contact__row a{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-dim); transition:color .25s; }
.contact__row a:hover{ color:var(--ink); }

.foot{ display:flex; justify-content:space-between; gap:1rem; padding:1.5rem var(--gutter); border-top:1px solid var(--line); color:var(--ink-faint); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.14em; }

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:oklch(0.10 0.01 60 / 0.94); backdrop-filter:blur(8px);
  padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb.is-open{ opacity:1; }
.lb[hidden]{ display:none; }
.lb__stage{
  position:relative; max-width:min(1200px,92vw); max-height:82vh;
  transform:scale(0.97); transition:transform .4s var(--ease);
}
.lb.is-open .lb__stage{ transform:none; }
.lb__stage video{ max-width:100%; max-height:82vh; border-radius:6px; background:#000; box-shadow:0 30px 80px oklch(0 0 0 / 0.6); }
.lb__stage[data-orient="portrait"] video{ max-height:82vh; width:auto; }
.lb__caption{ position:absolute; left:0; right:0; bottom:clamp(0.6rem,2vw,1.2rem); text-align:center; color:var(--ink-dim); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.18em; }
.lb__spin{ position:absolute; top:50%; left:50%; width:2.5rem; height:2.5rem; margin:-1.25rem 0 0 -1.25rem; border:2px solid oklch(0.96 0.004 80 / 0.25); border-top-color:var(--accent); border-radius:999px; opacity:0; animation:spin .8s linear infinite; }
.lb__stage.is-loading .lb__spin{ opacity:1; }
.lb__stage.is-error::after{ content:"Couldn’t load this clip. Try again."; position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-dim); font-size:0.85rem; letter-spacing:0.04em; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.lb__close{
  position:absolute; top:clamp(0.6rem,2vw,1.4rem); right:clamp(0.6rem,2vw,1.4rem);
  width:3rem; height:3rem; border-radius:999px; border:1px solid var(--line);
  background:oklch(0.2 0.01 60 / 0.6); color:var(--ink); font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .25s, transform .25s var(--ease);
}
.lb__close:hover{ background:var(--accent); color:var(--bg); transform:rotate(90deg); }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:3.25rem; height:3.25rem; border-radius:999px; border:1px solid var(--line);
  background:oklch(0.2 0.01 60 / 0.5); color:var(--ink); font-size:1.8rem; line-height:1; cursor:pointer;
  transition:background .25s, border-color .25s;
}
.lb__nav:hover{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
.lb__prev{ left:clamp(0.5rem,2vw,1.5rem); }
.lb__next{ right:clamp(0.5rem,2vw,1.5rem); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  .about__media{ order:-1; max-width:480px; }
  .tile{ grid-column:span 12; }
  .tile.is-feature{ grid-column:span 12; }
  .tile[data-orient="portrait"]{ grid-column:span 6; }
  .tile.is-feature[data-orient="portrait"]{ grid-column:span 6; }
  .bar__nav a:not(.bar__cta){ display:none; }
  .bar{ background:oklch(0.13 0.01 60 / 0.96); border-bottom:1px solid var(--line); }
}
@media (max-width:560px){
  .tile[data-orient="portrait"]{ grid-column:span 6; }
  .work__sub{ font-size:0.85rem; max-width:none; }
  .lb__nav{ width:2.6rem; height:2.6rem; font-size:1.4rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
  .tile{ opacity:1; transform:none; }
  .hero__scroll svg{ animation:none; }
  .grain{ display:none; }
}