/* ============================================================
   Riyo Productions — Global Stylesheet
   Mobile-first · Cinematic · Minimal

   Portions of this file are adapted from third-party CodePen
   work under the MIT License:

   --- btn-more-work (btn-5 style) ---
   The MIT License (MIT)
   Copyright (c) 2026 Yuhomyan (https://codepen.io/yuhomyan/pen/OJMejWJ)

   --- Client marquee carousel concept ---
   The MIT License (MIT)
   Copyright (c) 2026 Fabio Ottaviani (https://codepen.io/supah/pen/xxJMbbg)

   Permission is hereby granted, free of charge, to any person
   obtaining a copy of this software and associated documentation
   files (the "Software"), to deal in the Software without
   restriction, including without limitation the rights to use,
   copy, modify, merge, publish, distribute, sublicense, and/or
   sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following
   conditions:

   The above copyright notice and this permission notice shall be
   included in all copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
   ============================================================ */

/* --- Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;font-family:Helvetica,Arial,sans-serif;
  background:#0a0a0a;color:#ffffff;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}

/* --- Custom Properties -------------------------------------- */
:root{
  --c-bg:#0a0a0a;
  --c-surface:#111;
  --c-surface-2:#1a1a1a;
  --c-text:#ffffff;
  --c-text-muted:#cccccc;
  --c-accent:#ffffff;
  --c-border:rgba(255,255,255,.08);
  --max-w:1280px;
  --space-xs:.5rem;--space-sm:.75rem;--space-md:1.25rem;--space-lg:2rem;--space-xl:3.5rem;--space-2xl:6rem;
  --radius:10px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(0,.02,0,1);
  --transition-fast:.2s var(--ease);
  --transition:.4s var(--ease-out);
  --header-h:60px;
}

/* --- Typography --------------------------------------------- */
h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2rem,6vw,4.5rem)}
h2{font-size:clamp(1.5rem,4vw,2.75rem)}
h3{font-size:clamp(1.1rem,2.5vw,1.5rem)}
p{color:var(--c-text-muted);max-width:56ch}
.label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--c-text-muted)}

/* --- Layout ------------------------------------------------- */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--space-md)}
.section{padding:var(--space-2xl) 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);display:flex;align-items:center;
  background:rgba(10,10,10,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-border);transition:background var(--transition-fast);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--space-md)}
.logo{display:flex;align-items:center}
.logo-img{height:42px;width:auto;display:block;filter:brightness(0) invert(1)}

.nav-links{display:flex;gap:var(--space-lg);align-items:center}
.nav-links a{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;position:relative;padding:.25em 0;transition:color var(--transition-fast)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--c-text);transition:width .3s var(--ease-out)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

.burger{display:none;flex-direction:column;gap:5px;width:24px;cursor:pointer;z-index:110}
.burger span{display:block;height:1.5px;background:#fff;border-radius:2px;transition:var(--transition)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:105;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xl);background:rgba(10,10,10,.97);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav a{font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase;transition:color var(--transition-fast)}
.mobile-nav a:hover{color:var(--c-text-muted)}

@media(max-width:768px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:var(--header-h);background:#000}
.hero-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#0a0a0a 0%,#1a1a2e 40%,#16213e 70%,#0a0a0a 100%);opacity:0;transition:opacity .6s ease}
.hero.revealed .hero-bg{opacity:1}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.03) 0%,transparent 70%)}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(10,10,10,.3) 0%,rgba(10,10,10,.7) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:var(--space-xl) var(--space-md)}
.hero-title{margin-bottom:var(--space-sm);color:#fff;opacity:0;transform:translateY(12px);transition:opacity .8s ease .15s,transform .8s ease .15s}
.hero.revealed .hero-title{opacity:1;transform:translateY(0)}
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.hero-video.loaded{opacity:1}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header{margin-bottom:var(--space-lg)}
.section-header h2{margin-bottom:var(--space-xs)}
.section-header p{font-size:.9rem}

/* ============================================================
   FEATURED WORK — STACKED CAROUSEL (ref: supahfunk)
   ============================================================ */
.featured-work{background:var(--c-bg);position:relative}
.featured-carousel-wrap{
  position:relative;
  height:clamp(340px,55vw,520px);
  overflow:hidden;
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.featured-carousel-wrap:active{cursor:grabbing}

.fc-item{
  --items:6;
  --width:clamp(200px,38vw,400px);
  --height:clamp(260px,48vw,480px);
  --x:calc(var(--active) * 800%);
  --y:calc(var(--active) * 200%);
  --rot:calc(var(--active) * 120deg);
  --opacity:calc(var(--zIndex) / var(--items) * 3 - 2);
  position:absolute;
  z-index:var(--zIndex);
  width:var(--width);height:var(--height);
  top:50%;left:50%;
  margin:calc(var(--height) * -.5) 0 0 calc(var(--width) * -.5);
  border-radius:var(--radius);
  overflow:hidden;
  background:#111;
  box-shadow:0 10px 50px 10px rgba(0,0,0,.5);
  transform:translate(var(--x),var(--y)) rotate(var(--rot));
  transition:transform .8s var(--ease-snap);
  pointer-events:all;
  cursor:pointer;
}
.fc-item-inner{
  position:absolute;inset:0;
  transition:opacity .8s var(--ease-snap);
  opacity:var(--opacity);
}
.fc-item-inner::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent 30%,transparent 50%,rgba(0,0,0,.55));
}
.fc-item-media{
  width:100%;height:100%;object-fit:cover;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  font-size:.6rem;color:var(--c-text-muted);letter-spacing:.08em;text-transform:uppercase;
}
.fc-item-media img,.fc-item-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-item-title{
  position:absolute;z-index:2;top:14px;left:18px;
  font-size:clamp(.75rem,1.8vw,1rem);font-weight:600;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:opacity .8s var(--ease-snap);
}
.fc-item-views{
  position:absolute;z-index:2;bottom:14px;right:18px;
  font-size:.6rem;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase;
  transition:opacity .8s var(--ease-snap);
}

/* ============================================================
   ABOUT BLURB
   ============================================================ */
.about-blurb{text-align:center}
.about-blurb-text{max-width:52ch;margin:0 auto;font-size:clamp(1rem,2.2vw,1.25rem);line-height:1.7;color:var(--c-text-muted)}
.about-brand{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:600;color:var(--c-text);letter-spacing:-.01em}

/* ============================================================
   CLIENT CAROUSEL (marquee)
   ============================================================ */
.clients{background:var(--c-bg);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.client-track-wrapper{overflow:hidden;position:relative}
.client-track-wrapper::before,.client-track-wrapper::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.client-track-wrapper::before{left:0;background:linear-gradient(to right,var(--c-bg),transparent)}
.client-track-wrapper::after{right:0;background:linear-gradient(to left,var(--c-bg),transparent)}
.client-track{display:flex;align-items:center;gap:var(--space-xl);width:max-content;animation:marquee 30s linear infinite}
.client-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.client-item{flex-shrink:0;padding:var(--space-md) var(--space-lg);display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity var(--transition-fast)}
.client-item:hover{opacity:1}
.client-item img{display:block;height:48px;width:auto;min-width:40px;max-width:180px;object-fit:contain}
.client-item img[alt="Notion"],.client-item img[alt="Fortnite"]{filter:invert(1)}
/* Keep already-large wide logos from oversizing */
.client-item img[alt="Google"],.client-item img[alt="Wendy's"],.client-item img[alt="Athletes Unlimited Softball League"]{height:40px}

/* ============================================================
   MORE WORK BUTTON — btn-5 style
   Top & bottom border lines animate to full width on hover
   ============================================================ */
.more-work-section{display:flex;align-items:center;justify-content:center;padding:var(--space-xl) 0}
.btn-more-work{
  position:relative;display:inline-block;
  width:200px;height:50px;line-height:50px;text-align:center;
  font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(0deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 100%);
  border:none;border-radius:5px;
  cursor:pointer;
  transition:all .4s ease;
  box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.06),4px 4px 10px 0 rgba(0,0,0,.25);
}
.btn-more-work span{position:relative;z-index:1}
.btn-more-work:hover{color:#f0094a;background:transparent;box-shadow:none}
.btn-more-work::before,.btn-more-work::after{
  content:'';position:absolute;height:2px;width:0;
  background:#f0094a;
  box-shadow:-1px -1px 5px 0 rgba(255,255,255,.12),4px 4px 8px 0 rgba(0,0,0,.15);
  transition:width .4s ease;
}
.btn-more-work::before{top:0;right:0}
.btn-more-work::after{bottom:0;left:0}
.btn-more-work:hover::before,.btn-more-work:hover::after{width:100%;transition:width .8s ease}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{border-top:1px solid var(--c-border)}
.contact-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-lg)}
.contact-heading{font-size:clamp(1.6rem,4vw,3rem);font-weight:600;letter-spacing:-.02em}
.contact-sub{color:var(--c-text-muted);font-size:clamp(.85rem,1.5vw,1rem);max-width:38ch}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-lg)}
.contact-link{display:flex;align-items:center;gap:.5em;font-size:.9rem;letter-spacing:.04em;padding:.6em 1.4em;border:1px solid var(--c-border);border-radius:50px;transition:border-color var(--transition-fast),background var(--transition-fast)}
.contact-link:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.contact-link svg{width:18px;height:18px;flex-shrink:0}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{padding:var(--space-lg) 0;text-align:center;font-size:.75rem;color:var(--c-text-muted);letter-spacing:.04em;border-top:1px solid var(--c-border)}

/* ============================================================
   WORK PAGE
   ============================================================ */

/* Secondary nav */
.work-nav{display:flex;gap:var(--space-sm);padding:var(--space-md) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.work-nav::-webkit-scrollbar{display:none}
.work-nav-btn{flex-shrink:0;padding:.55em 1.2em;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--c-border);border-radius:50px;background:transparent;color:var(--c-text-muted);transition:all var(--transition-fast);white-space:nowrap}
.work-nav-btn:hover{border-color:rgba(255,255,255,.25);color:var(--c-text)}
.work-nav-btn.active{background:#fff;color:#0a0a0a;border-color:#fff}

/* Work cards — expandable (ref: yudiz expandable slider) */
.work-section{margin-bottom:var(--space-xl)}
.work-section-title{
  font-size:clamp(1rem,2.5vw,1.35rem);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 var(--space-md);color:var(--c-text);
}

.work-grid-wrap{position:relative}
.work-grid{
  display:flex;
  gap:var(--space-md);
  padding-bottom:var(--space-xl);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.work-grid::-webkit-scrollbar{display:none}

.work-card{
  flex:0 0 clamp(180px,40vw,320px);
  height:clamp(240px,50vw,400px);
  position:relative;
  display:flex;align-items:flex-end;
  background:#1a1a1a no-repeat center/cover;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:all .45s ease-in-out;
}
.work-card.active{
  flex:0 0 clamp(280px,55vw,500px);
  box-shadow:12px 40px 40px rgba(0,0,0,.25);
}

.work-card::after{
  content:'';display:block;position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.85));
  pointer-events:none;
}

.work-card-media{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  font-size:.6rem;color:var(--c-text-muted);letter-spacing:.08em;text-transform:uppercase;
}
.work-card-media img,.work-card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.work-card-info{
  position:relative;z-index:1;
  padding:0 var(--space-md) var(--space-sm);
  color:#fff;
  overflow:hidden;
  transform:translateY(calc(100% - 42px));
  transition:all .45s ease-in-out;
}
.work-card.active .work-card-info{transform:translateY(0)}
.work-card-info h3{font-size:clamp(.85rem,2vw,1.15rem);margin:0 0 .4em;line-height:1.3}
.work-card-info p{
  font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.7);
  opacity:0;transform:translateY(20px);
  transition:all .4s ease-in-out .15s;
}
.work-card.active .work-card-info p{opacity:1;transform:translateY(0)}

/* Scroll indicator arrow */
.scroll-indicator{
  position:absolute;right:0;top:0;bottom:var(--space-xl);width:48px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to right,transparent,rgba(10,10,10,.85) 60%);
  color:rgba(255,255,255,.5);font-size:1.6rem;font-weight:300;
  pointer-events:none;
  transition:opacity .3s ease;
}
.scroll-indicator.hidden{opacity:0}

@media(max-width:480px){
  .work-nav{display:flex}
  .work-section-title{display:none}
  .work-section{margin-bottom:0}
  .work-section[hidden]{display:none}
  .work-grid-wrap{position:static}
  .scroll-indicator{display:none}
  .work-grid{flex-direction:column;overflow-x:visible}
  .work-card{flex:none!important;width:100%;height:clamp(220px,60vw,300px)}
  .work-card.active{width:100%;height:clamp(300px,80vw,420px)}
}

@media(min-width:481px){
  .work-nav{display:none}
}

/* ============================================================
   PAGE FADE-IN
   ============================================================ */
.page-content{animation:fadeUp .6s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}