/* ===================================================
   ANTOINE HAY — Portfolio
   Feuille de style principale
   =================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --black:#000; --white:#fff; --dim:#333; --grey:#888; }
html { scroll-behavior: smooth; }
body {
  background: var(--black); color: var(--white);
  font-family: 'Poppins', sans-serif; font-weight: 300;
  cursor: none; overflow-x: hidden;
}

/* ── CURSOR (desktop only) ── */
.cursor, .cursor-ring { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; top:0; left:0;
    width:8px; height:8px; background:var(--white); border-radius:50%;
    pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%); transition:width .15s, height .15s;
  }
  .cursor-ring {
    display: block; position:fixed; top:0; left:0;
    width:32px; height:32px; border:1px solid rgba(255,255,255,.3); border-radius:50%;
    pointer-events:none; z-index:9998;
    transform:translate(-50%,-50%); transition:width .18s, height .18s, opacity .18s;
  }
  .cursor.big { width:5px; height:5px; }
  .cursor-ring.big { width:50px; height:50px; opacity:.25; }
  .cursor.text { width:22px; height:22px; mix-blend-mode:difference; }
  body { cursor: none; }
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 44px;
  background:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .3s, backdrop-filter .3s, border-color .3s;
}
nav.scrolled {
  background:rgba(0,0,0,.88); backdrop-filter:blur(12px);
  border-color:var(--dim);
}

.logo {
  color:var(--white); text-decoration:none;
  display:flex; align-items:baseline; gap:5px; z-index:201;
}
.logo-first {
  font-family:'Poppins',sans-serif; font-weight:100;
  font-size:17px; letter-spacing:.15em; text-transform:uppercase;
}
.logo-last {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:17px; letter-spacing:.15em; text-transform:uppercase;
}
.logo sup {
  font-family:'Poppins',sans-serif; font-weight:300;
  font-size:7px; letter-spacing:.35em; vertical-align:super;
  margin-left:6px; opacity:.75; text-transform:uppercase;
}

/* desktop nav links */
.nav-right {
  display:flex; gap:0; align-items:center; list-style:none;
}
.nav-right > li > a {
  display:block; padding:6px 16px;
  font-size:9px; font-weight:300; letter-spacing:.35em; text-transform:uppercase;
  color:var(--white); text-decoration:none; opacity:.75; transition:opacity .2s; cursor:none;
}
.nav-right > li > a:hover { opacity:1; }

/* ── BURGER ── */
.burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none;
  padding:4px; z-index:201;
}
.burger span {
  display:block; width:24px; height:1px; background:var(--white);
  transition:transform .3s, opacity .3s;
}
.burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:199;
  background:var(--black);
  flex-direction:column; justify-content:center; align-items:flex-start;
  padding:100px 32px 48px;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu nav-links { list-style:none; }
.mobile-nav-links { list-style:none; width:100%; }
.mobile-nav-links li {
  border-bottom:1px solid var(--dim);
  padding:0;
}
.mobile-nav-links a {
  display:block; padding:22px 0;
  font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,8vw,56px);
  letter-spacing:.04em; color:var(--white); text-decoration:none;
  opacity:.85; transition:opacity .15s;
}
.mobile-nav-links a:hover { opacity:1; }
.mobile-nav-sub {
  display:flex; gap:24px; margin-top:36px; flex-wrap:wrap;
}
.mobile-nav-sub a {
  font-size:9px; font-weight:300; letter-spacing:.35em; text-transform:uppercase;
  color:var(--white); text-decoration:none; opacity:.7; transition:opacity .15s;
}
.mobile-nav-sub a:hover { opacity:.8; }
.mobile-socials { display:flex; gap:20px; margin-top:auto; }
.mobile-socials a {
  font-size:16px; color:var(--white); text-decoration:none; opacity:.7;
  transition:opacity .2s;
}
.mobile-socials a:hover { opacity:1; }

/* ── INTRO ANIMATIONS ── */
@keyframes bgZoom {
  from { transform:scale(1.07); }
  to   { transform:scale(1); }
}
@keyframes heroSlogan {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}
@keyframes heroSub {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:.7; transform:none; }
}
@keyframes heroScroll {
  from { opacity:0; }
  to   { opacity:.25; }
}

.hero-bg-img      { animation:bgZoom 2.4s cubic-bezier(.16,1,.3,1) both; }
.hero-slogan      { animation:heroSlogan .95s cubic-bezier(.16,1,.3,1) .12s both; }
.hero-baseline    { animation:heroSub .95s cubic-bezier(.16,1,.3,1) .32s both; }
.hero-role        { animation:heroSub .95s cubic-bezier(.16,1,.3,1) .52s both; }
.hero-scroll-wrap { animation:heroScroll .8s ease 1s both; }

/* ── HERO ── */
.hero {
  position:relative; height:100vh;
  display:grid; grid-template-rows:1fr auto;
  padding:0 44px 44px; overflow:hidden;
  border-bottom:1px solid var(--dim);
}
.hero-bg-img {
  position:absolute; inset:0; background:#111;
  background-image:url('./assets/medias/background/malta.webp');
  background-size:cover; background-position:center; z-index:0;
}
.hero-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.5) 100%);
  z-index:1;
}
.hero-center {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-slogan {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,9vw,140px);
  line-height:.9; letter-spacing:.01em;
  color:var(--white); text-align:center; white-space:nowrap;
}
.hero-dot { color:var(--white); }
.hero-baseline {
  font-family:'Poppins',sans-serif; font-weight:200;
  font-size:clamp(8px,1vw,11px);
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--white); opacity:.7; text-align:center;
  margin-top:20px;
}
.hero-bottom {
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.hero-role {
  font-size:9px; font-weight:300; letter-spacing:.45em;
  text-transform:uppercase; opacity:.7; line-height:2.2;
}
.hero-scroll-wrap {
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.25;
}
.hero-scroll-wrap span {
  font-size:7px; letter-spacing:.4em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.scroll-line {
  width:1px; height:48px; background:var(--white);
  transform-origin:top; animation:sline 2s ease-in-out infinite;
}
@keyframes sline {
  0%{transform:scaleY(0);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0}
}

/* ── MARQUEE ── */
.marquee-bar {
  border-bottom:1px solid var(--dim); overflow:hidden; white-space:nowrap; padding:11px 0;
}
.marquee-inner { display:inline-flex; animation:marquee 20s linear infinite; }
.marquee-inner span {
  font-family:'Bebas Neue',sans-serif; font-size:10px; letter-spacing:.25em;
  color:var(--dim); padding:0 32px;
}
.marquee-inner span.sep { color:var(--white); opacity:.12; padding:0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── WORKS ── */
.works { padding:68px 72px 96px; }
.section-header {
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--dim); padding-bottom:14px; margin-bottom:44px;
}
.section-label {
  font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:.35em;
  color:var(--white); opacity:.75;
}
.filters { display:flex; list-style:none; flex-wrap:wrap; }
.filters li {
  padding:5px 14px; font-size:8px; font-weight:400; letter-spacing:.35em;
  text-transform:uppercase; color:var(--white); opacity:.65; cursor:none;
  transition:all .2s; border-left:1px solid var(--dim);
}
.filters li:first-child { border-left:none; }
.filters li.active { opacity:1; background:var(--white); color:var(--black); }
.filters li:hover:not(.active) { opacity:.8; }

/* GRID */
.grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:8px; max-width:1400px; margin:0 auto; }
.card { position:relative; overflow:hidden; cursor:none; background:#111; transition:opacity .35s ease, transform .35s ease; }
.card.hidden { display:none; }
.card--large  { grid-column:span 2; }
.card--medium { grid-column:span 1; }
.card--wide   { grid-column:span 3; }
.card--small  { grid-column:span 1; }
.card-thumb {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.25,.46,.45,.94), filter .4s;
}
.card:hover .card-thumb { transform:scale(1.05); filter:brightness(.65); }
.card-info {
  position:absolute; bottom:0; left:0; right:0; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:flex-end;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%);
}
.card-title {
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:.08em; color:var(--white);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
}
.card-tag {
  font-size:9px; font-weight:500; letter-spacing:.25em; text-transform:uppercase;
  color:var(--white); opacity:0; transition:opacity .3s .05s;
}
.card:hover .card-title, .card:hover .card-tag { opacity:1; transform:none; }
.card-num {
  position:absolute; top:12px; left:14px;
  font-weight:300; font-size:10px; letter-spacing:.2em; color:var(--white); opacity:.5;
}
.card-duration {
  position:absolute; top:12px; right:14px;
  display:flex; align-items:center; gap:5px;
  padding:4px 9px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2);
  font-family:'Poppins',sans-serif; font-weight:400;
  font-size:10px; letter-spacing:.1em; color:var(--white);
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s, transform .3s;
}
.card-duration i { font-size:8px; opacity:.7; }
.card:hover .card-duration { opacity:1; transform:translateY(0); }
@media (hover: none) {
  .card-duration { opacity:1 !important; transform:none !important; }
}
.card-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:46px; height:46px; border:1px solid rgba(255,255,255,.65); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events:none;
}
.card-play svg { fill:var(--white); margin-left:3px; }
.card:hover .card-play { transform:translate(-50%,-50%) scale(1); }
.card.hidden { display:none; }

/* card-title always visible on touch */
@media (hover: none) {
  .card-title, .card-tag { opacity:1 !important; transform:none !important; }
  .card-play { display:none; }
}

/* ── ABOUT ── */
.about {
  border-top:1px solid var(--dim); padding:80px 44px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}
.about-heading {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,6.5vw,96px); line-height:.88; letter-spacing:.02em; color:var(--white);
}
.about-heading small {
  display:block; font-family:'Poppins',sans-serif; font-weight:300;
  font-size:9px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--white); opacity:.7; margin-top:18px; line-height:2.4;
}
.about-text {
  font-size:11px; font-weight:300; letter-spacing:.04em;
  line-height:2.3; color:var(--white); opacity:.85; margin-bottom:36px;
}
.about-socials { display:flex; gap:16px; }
.about-socials a {
  width:36px; height:36px; border:1px solid var(--dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); text-decoration:none; opacity:.7; font-size:13px;
  transition:opacity .2s, border-color .2s;
}
.about-socials a:hover { opacity:1; border-color:var(--white); }

/* ── FOOTER ── */
footer { border-top:1px solid var(--dim); padding:52px 44px 28px; }
.footer-top {
  display:grid; grid-template-columns:200px 1fr; gap:60px; margin-bottom:44px;
}
.footer-brand-name {
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:.1em;
  color:var(--white); margin-bottom:6px;
}
.footer-tagline {
  font-size:8px; font-weight:300; letter-spacing:.35em; text-transform:uppercase;
  color:var(--white); opacity:.65; margin-bottom:22px;
}
.footer-socials { display:flex; gap:14px; }
.footer-socials a {
  width:30px; height:30px; border:1px solid var(--dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); text-decoration:none; opacity:.65; font-size:11px;
  transition:opacity .2s, border-color .2s;
}
.footer-socials a:hover { opacity:1; border-color:var(--white); }
.footer-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.footer-col-heading {
  font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:.25em;
  color:var(--white); opacity:.7; margin-bottom:18px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a {
  font-size:9px; font-weight:300; letter-spacing:.25em; text-transform:uppercase;
  color:var(--white); text-decoration:none; opacity:.7;
  display:flex; align-items:center; gap:9px; transition:opacity .2s;
}
.footer-col a:hover { opacity:1; }
.footer-col a i { width:12px; font-size:10px; opacity:.6; }
.footer-divider { border-top:1px solid var(--dim); margin-bottom:20px; }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-copy, .footer-credit {
  font-size:8px; font-weight:300; letter-spacing:.2em; color:var(--white); opacity:.55;
}
.footer-bottom-socials { display:flex; gap:16px; }
.footer-bottom-socials a {
  font-size:11px; color:var(--white); text-decoration:none; opacity:.55; transition:opacity .2s;
}
.footer-bottom-socials a:hover { opacity:.8; }
.footer-legal {
  font-size:8px; font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white); opacity:.55; text-decoration:none; transition:opacity .2s;
}
.footer-legal:hover { opacity:.6; }

/* ── VIDEO MODAL ── */
.video-modal {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  background:rgba(0,0,0,.92); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.video-modal.open { opacity:1; pointer-events:all; }
.video-modal-inner {
  position:relative; width:100%; max-width:1100px;
  transform:scale(.96); transition:transform .3s;
}
.video-modal.open .video-modal-inner { transform:scale(1); }
.video-frame-wrap {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border:1px solid var(--dim);
}
.video-frame-wrap iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-modal-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:16px; gap:16px; flex-wrap:wrap;
}
.video-modal-title {
  font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.06em; color:var(--white);
}
.video-modal-yt {
  display:inline-flex; align-items:center; gap:9px;
  font-size:9px; font-weight:300; letter-spacing:.3em; text-transform:uppercase;
  color:var(--white); text-decoration:none; opacity:.6;
  border:1px solid var(--dim); padding:9px 16px;
  transition:opacity .2s, border-color .2s;
}
.video-modal-yt:hover { opacity:1; border-color:var(--white); }
.video-modal-yt i { color:#ff0000; font-size:13px; }
.video-modal-close {
  position:absolute; top:-38px; right:0;
  background:none; border:none; cursor:none;
  color:var(--white); opacity:.6; font-size:22px; line-height:1;
  transition:opacity .2s, transform .2s;
}
.video-modal-close:hover { opacity:1; transform:rotate(90deg); }
@media (max-width:600px) {
  .video-modal { padding:16px; }
  .video-modal-close { top:-34px; }
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */

/* Tablet — 900px */
@media (max-width: 900px) {
  nav { padding:18px 24px; }
  .nav-right { display:none; }
  .burger { display:flex; }
  .mobile-menu { display:flex; }

  .hero { padding:0 24px 36px; }
  .hero-scroll-wrap { display:none; }

  .works { padding:52px 24px 72px; }
  .section-header { flex-direction:column; gap:18px; align-items:flex-start; }
  .filters { gap:0; }

  .grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; }
  .card--large  { grid-column:span 2; }
  .card--medium { grid-column:span 1; }
  .card--wide   { grid-column:span 2; }
  .card--small  { grid-column:span 1; }

  .about { grid-template-columns:1fr; gap:40px; padding:56px 24px; }
  footer { padding:44px 24px 24px; }
  .footer-top { grid-template-columns:1fr; gap:36px; }
  .footer-cols { grid-template-columns:1fr 1fr; }
}

/* Mobile — 600px */
@media (max-width: 600px) {
  nav { padding:16px 20px; }

  .hero { padding:0 20px 32px; }
  .hero-role { display:none; }

  .works { padding:44px 16px 60px; }
  .filters li { padding:5px 10px; font-size:7px; }

  .grid { grid-template-columns:1fr; grid-auto-rows:200px; }
  .card--large, .card--medium, .card--wide, .card--small { grid-column:span 1; }

  .about { padding:48px 16px; }
  .about-text { font-size:10px; }

  footer { padding:36px 16px 20px; }
  .footer-cols { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; }

  .mobile-menu { padding:88px 20px 40px; }
  .mobile-nav-sub { gap:16px; }
}