/* thomasvizuals — site styles */
:root{
  /* Font for the big "VIDEOS" intro: swap 'Outfit' for 'Anton', 'Bebas Neue', 'Archivo Black', 'Syne' or 'Playfair Display' */
  --title-font:'Outfit',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:'Outfit',system-ui,sans-serif;overflow:hidden}
a{color:#fff;text-decoration:none}
a:hover{color:#cfcfcf}
button{font:inherit;color:inherit}

.stage{position:fixed;inset:0;overflow:hidden;background:#000}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dim{position:absolute;inset:0;pointer-events:none;transition:opacity .8s ease}
.dim-light{background:rgba(0,0,0,.28)}
.dim-strong{background:rgba(0,0,0,.55);opacity:0}
body:not([data-view="home"]) .dim-strong{opacity:1}
body.cinema .dim-light{opacity:0}

/* Layers (views) */
.layer{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
body[data-view="about"] #about,
body[data-view="contact"] #contact{opacity:1;pointer-events:auto;transform:none}

/* Header */
.brand{position:absolute;top:22px;left:40px;z-index:5;background:none;border:0;padding:10px 0;font-weight:800;font-size:26px;letter-spacing:-.01em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s ease}
body:not([data-view="home"]) .brand{opacity:1;pointer-events:auto}
.nav{position:absolute;top:20px;right:40px;z-index:5;display:flex;gap:32px;font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;transition:opacity .7s ease}
.nav button{background:none;border:1.5px solid transparent;border-radius:4px;padding:10px 14px;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:border-color .4s ease}
.nav button[aria-pressed="true"]{border-color:#fff}
body.cinema .nav{opacity:0;pointer-events:none}

/* Home */
.home{position:absolute;left:68px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:36px;transition:opacity .7s ease}
body:not([data-view="home"]) .home,body.cinema .home{opacity:0;pointer-events:none}
.home-name{font-weight:800;font-size:44px;line-height:1;letter-spacing:-.01em}
.btn-reel{margin-left:26px;height:50px;padding:0 38px;border-radius:25px;border:1.5px solid #fff;background:#fff;color:#000;display:flex;align-items:center;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.btn-reel:hover{background:#e6e6e6}

/* Projects */
#projects{overflow-y:auto;padding:120px 20px 60px;scrollbar-width:none;transform:none}
#projects::-webkit-scrollbar{width:0;height:0}
body[data-view="projects"]:not(.intro) #projects{opacity:1;pointer-events:auto}
.grid{max-width:1144px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tile{position:relative;aspect-ratio:16/9;padding:0;border:0;border-radius:22px;overflow:hidden;background:#151515;cursor:pointer;display:block;width:100%;
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:nth-child(2n){transition-delay:.15s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.03)}
.tile.is-hidden{opacity:0;transform:translateY(40px)}
.tile-label{position:absolute;left:30px;bottom:26px;display:flex;align-items:center;gap:14px;font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6)}

.intro-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .9s ease}
.intro-title h1{margin:0;font-family:var(--title-font);font-weight:900;font-size:clamp(72px,14vw,200px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
body[data-view="projects"].intro .intro-title{opacity:1}

/* About */
#about{padding:120px 20px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.big-title{margin:0;font-weight:900;font-size:clamp(56px,7vw,96px);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
#about .big-title{margin-bottom:48px}
#about p{margin:0;max-width:760px;font-weight:300;font-size:20px;line-height:1.6}
#about p.lead{font-weight:600;font-size:22px;line-height:1.5}
.rule{width:340px;max-width:60%;height:1px;margin:44px 0;background:rgba(255,255,255,.7)}
.linkish{background:none;border:0;padding:0;font-weight:600;text-decoration:underline;text-underline-offset:6px;cursor:pointer}
.signature{margin-top:auto;font-size:11px;letter-spacing:.9em;text-transform:uppercase;color:#bdbdbd;padding-left:.9em}

/* Contact */
#contact{padding:0 60px 52px;display:flex;flex-direction:column;justify-content:flex-end;gap:40px}
#contact .kicker{margin:0;font-size:22px;letter-spacing:.02em;color:#d0d0d0}
.contact-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid rgba(255,255,255,.35)}
.mail{font-size:24px;padding:8px 0}
.socials{display:flex;gap:12px}
.socials a{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:24px}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center}
.lightbox.is-open{display:flex}
.lightbox video{max-width:88vw;max-height:82vh;border-radius:14px;background:#000}
.btn-close{position:absolute;top:24px;right:32px;height:48px;padding:0 18px;border:1.5px solid #fff;border-radius:24px;background:transparent;display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* Mobile */
@media (max-width:760px){
  .brand{left:20px;top:14px;font-size:20px}
  .nav{right:12px;top:58px;gap:6px;font-size:12px}
  body[data-view="home"] .nav{top:14px}
  .nav button{padding:8px 10px}
  .home{left:24px;gap:24px}
  .home-name{font-size:32px}
  .btn-reel{margin-left:0}
  #projects{padding:120px 14px 40px}
  .grid{grid-template-columns:1fr;gap:14px}
  .tile{border-radius:18px}
  .tile:nth-child(2n){transition-delay:0s}
  .tile-label{left:20px;bottom:18px;font-size:12px}
  #about{padding-top:130px}
  #about p{font-size:17px}
  #about p.lead{font-size:19px}
  .rule{margin:28px 0}
  #contact{padding:0 20px 36px}
  .mail{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .tile,.layer,.intro-title,.dim{transition:none}
  .tile.is-hidden{opacity:1;transform:none}
}