/* ============================================================
   Ricardo G Mendes — portfolio (Wix rebuild)
   ============================================================ */
:root{
  --ink:      #0e1122;   /* near-black navy */
  --indigo:   #3626c7;   /* reel section blue */
  --indigo-d: #241a7a;
  --pink:     #e60f7f;
  --magenta:  #c01862;
  --cyan:     #37d3d3;
  --white:    #ffffff;
  --maxw:     1200px;
  /* Global proportional scale: 1.0 at the 1425px reference design width.
     Every desktop dimension is written as design-px × var(--s), so the whole
     composition scales with the window like a zoomed canvas. */
  --s: calc(100vw / 1425);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  overflow-x:hidden;            /* prevent horizontal scroll on the ROOT (safe here — the body-promotion gutter bug only happens when this is on <body>) */
}
html,body{
  width:100%;
  max-width:100%;
  margin:0;
}
body{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--ink);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* visible keyboard focus (mouse focus stays clean via :focus-visible) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px;
}

/* ===================== NAV ===================== */
/* Reference design: nav 169px tall, logo 231px wide at x188, icons 50px, cluster centered at x899 */
.nav{
  position:relative; z-index:20;
  background:#000;
  display:flex; align-items:center;
  height:calc(169*var(--s));
  padding:0 0 0 calc(188*var(--s));
}
.nav__logo img{ width:calc(231*var(--s)); height:auto; }
.nav__social{
  position:absolute; left:calc(899*var(--s)); top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:calc(26*var(--s));
}
.nav__social a{ flex:none; }
.nav__social a img{ width:calc(50*var(--s)); height:calc(50*var(--s)); object-fit:contain; max-width:none; transition:transform .2s ease; }
.nav__social a:hover img{ transform:translateY(-3px) scale(1.08); }
/* nav arrows: crisp still (2s frame) at rest; the animated clip fades in + plays on hover.
   Still = alpha PNG (native transparency on the black nav). Clip = flattened-on-black,
   composited via screen blend. Rest never depends on a paused <video> painting. */
.nav__arrow{ position:relative; display:block; width:calc(165*var(--s)); flex:none; opacity:.95; pointer-events:none; }
.nav__arrow-still{ display:block; width:100%; height:auto; mix-blend-mode:screen; transition:opacity .12s ease; }
.nav__arrow-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen; opacity:0; transition:opacity .12s ease;
}
.nav:hover .nav__arrow-still{ opacity:0; }
.nav:hover .nav__arrow-vid{ opacity:1; }
.nav__arrow--l{ margin-right:2px; }
.nav__arrow--r{ margin-left:2px; }

/* ===================== SHARED: fixed background (parallax) + texture ===================== */
/* Each bg video is position:fixed — pinned to the VIEWPORT (not the section) — so it holds
   still while the compact section scrolls over it; the video is just cropped, which is fine.
   A small scroll handler clips each fixed layer to its section's on-screen rect so only that
   section shows its video. Compositor-pinned = smooth (no per-frame repositioning). Mobile /
   reduce-motion fall back to a normal in-section background (see the media query below). */
.bg-fixed{
  position:absolute; inset:0; z-index:0;     /* base = normal in-section bg (mobile / reduce-motion) */
  overflow:hidden;
}
.hero .bg-fixed{ background:#141b52; }        /* fallback colour under each video */
.sketchband .bg-fixed{ background:#2a2fc0; }
.contact .bg-fixed{ background:var(--ink); }
.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.texture{ position:absolute; inset:0; z-index:1; pointer-events:none; }
/* desktop + motion OK: pin the background layer to the viewport… */
@media (min-width:821px) and (prefers-reduced-motion: no-preference){
  .bg-fixed{
    position:fixed; top:0; left:0;
    width:100vw; height:100vh; z-index:0;
  }
  /* …and clip each fixed bg to its own section NATIVELY: clip-path clips the fixed child while
     it stays viewport-pinned, and isolation makes the section a stacking context so the child
     paints inside it. The clip region moves with the section (no per-frame JS) → no flicker. */
  .hero, .sketchband, .contact{ clip-path:inset(0); isolation:isolate; }
}
.texture--hero{
  background:url("assets/deco-1.png") repeat, rgba(10,14,44,.30);
  background-blend-mode:multiply; opacity:.85;
}
.texture--sketch{
  background:url("assets/deco-2.png") repeat, rgba(10,14,60,.18);
  background-blend-mode:multiply;
}
.texture--contact{
  background:url("assets/deco-3.png") repeat, rgba(8,10,30,.20);
  background-blend-mode:multiply;
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  height:calc(822*var(--s));        /* compact (original height) — the fixed bg video pins to the viewport behind it and is cropped */
  overflow:hidden;
}
/* scribbles: exact original geometry in design-px, scaled by --s */
.scribble{ position:absolute; z-index:2; pointer-events:none; height:auto; }
.scribble--left{  left:calc(-61*var(--s));  top:0; width:calc(1095*var(--s)); }
#heroLine{ display:block; aspect-ratio:1600 / 1200; height:auto; }  /* mouse-X frame-scrub canvas */
.scribble--right{ left:calc(938*var(--s));  top:0; width:calc(1627*var(--s)); }
.scribble--circle{ left:calc(723*var(--s)); top:calc(555*var(--s)); width:calc(249*var(--s)); }
.scribble--x{      left:calc(747*var(--s)); top:calc(526*var(--s)); width:calc(219*var(--s)); }

/* ===================== REEL ===================== */
.reel{
  background:linear-gradient(180deg, var(--indigo) 0%, var(--indigo) 62%, var(--indigo-d) 100%);
  padding:0;                        /* thumbnails sit flush against the sketch band, like the real site */
}
.reel__featured{ position:relative; height:41.85vw; overflow:hidden; }  /* fully proportional, same as the Wix video widget (596px @ 1425) */
.reel__player{
  display:block; width:100%; height:100%; position:relative; line-height:0;
}
.reel__player img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }

/* play icon (Wix-style: small circle next to an underlined "Play Video" label) */
.play{
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.95);
  background:rgba(0,0,0,.2);
  transition:transform .2s ease, background .2s ease;
}
.play__tri{ width:0; height:0; }
.play--xs{ width:max(30px, calc(44*var(--s))); height:max(30px, calc(44*var(--s))); flex:none; }
.play--xs .play__tri{
  margin-left:3px;
  border-left:max(8px, calc(12*var(--s))) solid #fff;
  border-top:max(5px, calc(8*var(--s))) solid transparent;
  border-bottom:max(5px, calc(8*var(--s))) solid transparent;
}

/* "▶ Play Video" CTA (featured + thumb hover) */
.reel__cta,.thumb__cta{
  display:flex; align-items:center; gap:max(8px, calc(12*var(--s)));
  color:#fff; font-weight:400; font-size:max(13px, calc(18*var(--s)));
  line-height:1.4;
}
.cta-label{ text-decoration:underline; text-underline-offset:4px; }
.reel__cta{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.reel__player:hover .play,.thumb__btn:hover .play{ transform:scale(1.1); background:rgba(230,15,127,.55); }

/* thumbnails — title appears ON HOVER over the image (like the Wix widget), not below it */
.thumbs{
  list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px;
  max-width:100%;
  margin-top:2px;
}
.thumb{ position:relative; }
.thumb__btn{ display:block; width:100%; position:relative; line-height:0; overflow:hidden; }
.thumb__btn img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.thumb__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:max(10px, calc(14*var(--s)));
  background:rgba(12,12,28,.45);
  opacity:0; transition:opacity .25s ease;
}
.thumb__btn:hover .thumb__overlay,.thumb__btn:focus-visible .thumb__overlay{ opacity:1; }
.thumb__name{
  font-family:"Montserrat",sans-serif; font-weight:400; color:#fff;
  font-size:max(15px, calc(22*var(--s))); line-height:1.3;
}
/* touch devices have no hover — always show a title + play badge as a bottom caption
   so the thumbnails read as labelled, playable videos */
@media (hover: none){
  .thumb__overlay{
    opacity:1; justify-content:flex-end; gap:8px; padding:0 14px 12px;
    background:linear-gradient(to top, rgba(8,8,20,.8), rgba(8,8,20,.05) 55%, transparent);
  }
  .thumb__cta .cta-label{ display:none; }   /* the title is enough on touch; keep just the play circle */
  .thumb__name{ font-size:max(14px, 3.6vw); }
}

/* ===================== SKETCH BAND (silk video + scribbles) ===================== */
.sketchband{
  position:relative;
  overflow:hidden;
  height:calc(533*var(--s));       /* compact strip (original height); the fixed silk video pins behind it */
  display:flex; align-items:center; justify-content:center;
}
.sketchband__scribbles{
  position:relative; z-index:2;
  height:calc(470*var(--s)); width:auto; max-width:none;
}

/* ===================== CONTACT ===================== */
.contact{
  position:relative;
  overflow:hidden;                  /* height driven by the content card; the fixed pink-circle bg pins behind it */
}
/* the contact card — normal-flow content box; holds the absolute pieces (up-arrow, socials, accents) */
.contact__stage{
  position:relative; z-index:2;
  min-height:calc(815*var(--s));    /* 815 design-px, proportional; content scales with it */
  padding:calc(96*var(--s)) calc(60*var(--s)) calc(90*var(--s));
}

/* up-arrow & socials are anchored relative to the CENTER (i.e. to the centered form),
   so they stay beside the form at every window width — offsets scale with --s */
.contact__top{ position:absolute; left:calc(50% - 394*var(--s)); bottom:calc(132*var(--s)); z-index:3; }
.contact__top img{ height:calc(90*var(--s)); width:auto; transform:scaleY(-1); transition:transform .2s ease; }  /* raw art points down; flip up like Wix did */
.contact__top:hover img{ transform:translateY(-6px) scaleY(-1); }

.contact__inner{
  position:relative; z-index:2;
  max-width:640px; margin:0 auto; text-align:center;
}
/* subtle scrim so the text/form reads cleanly over the animated pink circle */
.contact__inner::before{
  content:""; position:absolute; z-index:-1; inset:-6% -10%; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 46%, rgba(6,8,22,.4), transparent 72%);
}
.contact__intro{
  font-weight:300; font-size:max(13px, calc(17*var(--s))); line-height:1.7;
  margin-bottom:calc(30*var(--s));
}
.contact__intro .accent{ color:var(--cyan); font-weight:500; }
.contact__title{ width:calc(526*var(--s)); margin:0 auto calc(10*var(--s)); }
.contact__email{
  display:inline-block; color:var(--cyan); font-weight:400;
  font-size:max(13px, calc(16*var(--s)));
  margin-bottom:calc(26*var(--s)); border-bottom:1px solid transparent; transition:border .2s;
}
.contact__email:hover{ border-color:var(--cyan); }

/* form */
.form{ display:flex; flex-direction:column; gap:0; max-width:max(330px, calc(430*var(--s))); margin:0 auto; }
.form input,.form textarea{
  width:100%; background:transparent; border:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  color:#fff; font-family:inherit; font-size:max(12px, calc(15*var(--s))); font-weight:300;
  padding:calc(14*var(--s)) 4px; margin-bottom:6px; resize:none;
}
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.7); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--cyan); }
.form input:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.form__submit{
  margin-top:calc(22*var(--s)); background:#fff; color:#111;
  font-weight:600; letter-spacing:.03em; font-size:max(13px, calc(15*var(--s)));
  padding:calc(15*var(--s)); border-radius:2px;
  transition:background .2s, color .2s;
}
.form__submit:hover{ background:var(--cyan); color:#fff; }
.hp{ position:absolute; left:-9999px; }

/* inline success state (replaces the form after a background submit) */
.form__success{
  max-width:max(330px, calc(430*var(--s)));
  margin:calc(40*var(--s)) auto; text-align:center;
  font-weight:300; font-size:max(14px, calc(17*var(--s))); line-height:1.7;
}
.form__success-title{
  color:var(--cyan); font-weight:600;
  font-size:max(18px, calc(26*var(--s))); margin-bottom:calc(10*var(--s));
}

/* social column */
.contact__social{
  position:absolute; left:calc(50% + 273*var(--s)); right:auto;
  top:calc(384*var(--s));                 /* matches the real site: icons start 384 design-px from the section top */
  z-index:3;
  list-style:none; display:flex; flex-direction:column; gap:calc(30*var(--s));
}
.contact__social img{ width:calc(52*var(--s)); height:calc(52*var(--s)); object-fit:contain; transition:transform .2s ease; }
.contact__social a:hover img{ transform:scale(1.12); }

/* footer — its own full-width black bar (matches the real site) */
.footer{
  background:#000;
  display:flex; align-items:center; justify-content:center;
  padding:calc(11*var(--s)) 20px;
}
.footer img{ width:max(160px, calc(271*var(--s))); height:auto; }

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,6,14,.94);
  display:none; align-items:center; justify-content:center;
  padding:5vw;
}
.lightbox.open{ display:flex; }
.lightbox__frame{ width:min(1100px,100%); aspect-ratio:16/9; }
.lightbox__frame iframe{ width:100%; height:100%; border:0; border-radius:6px; }
.lightbox__close{
  position:absolute; top:24px; right:34px; font-size:44px; line-height:1;
  color:#fff; opacity:.85;
}
.lightbox__close:hover{ opacity:1; }

/* ===================== RESPONSIVE ===================== */

/* 821px+ : no breakpoints needed — the whole desktop design scales continuously via --s. */

/* Portrait tablet / large phone — dedicated mobile layout (like the real site's mobile view) */
@media (max-width:820px){
  .nav__arrow{ display:none; }
  .nav{ height:auto; padding:14px 20px; justify-content:space-between; }
  .nav__logo img{ width:clamp(130px,32vw,180px); }
  /* on mobile the cluster goes back to a simple flush-right position */
  .nav__social{ position:static; left:auto; transform:none; gap:14px; }
  .nav__social a img{ width:38px; height:38px; }

  /* mobile keeps the base .bg-fixed (absolute, in-section) — the desktop viewport-pin is off here */
  .hero{ height:clamp(420px,66vh,600px); }
  .scribble--left{  left:-10vw; top:2%;  width:94vw;  }
  .scribble--right{ left:54vw;  top:0;   width:135vw; }
  .scribble--circle{ left:45vw; top:66%; width:26vw;  }
  .scribble--x{      left:48vw; top:61%; width:22vw;  }

  .thumbs{ grid-template-columns:1fr; }
  .reel__featured{ height:clamp(240px,58vw,440px); }

  .sketchband{ height:clamp(260px,40vh,400px); }
  .sketchband__scribbles{ height:clamp(120px,32vw,220px); }

  .contact{ height:auto; }
  .contact__stage{ position:static; min-height:auto; padding:64px 22px 36px; }
  .contact__intro{ font-size:1rem; margin-bottom:26px; }
  .contact__title{ width:min(420px,80%); margin-bottom:8px; }
  .contact__email{ font-size:1rem; margin-bottom:24px; }
  .form{ max-width:100%; }
  .form input,.form textarea{ font-size:.95rem; padding:13px 4px; }
  .form__submit{ margin-top:20px; padding:14px; font-size:.95rem; }
  .contact__social{ position:static; left:auto; transform:none; flex-direction:row;
    justify-content:center; gap:34px; margin:40px 0 0; }
  .contact__social img{ width:44px; height:44px; }
  .contact__top{ position:static; left:auto; display:block; text-align:center; margin:28px auto 0; }
  .contact__top img{ height:60px; width:auto; margin:0 auto; }
  .footer{ padding:10px 20px; }
}

/* Phones */
@media (max-width:480px){
  .nav__logo img{ width:148px; }
  .nav__social a img{ width:34px; height:34px; }

  .hero{ height:clamp(360px,58vh,500px); }
  .scribble--right{ display:none; }          /* mostly off-screen anyway — declutter */
  .scribble--left{  left:-14vw; top:4%;  width:112vw; }
  .scribble--circle{ left:42vw; top:66%; width:34vw;  }
  .scribble--x{      left:46vw; top:60%; width:29vw;  }

  .reel__featured{ height:clamp(210px,64vw,360px); }
  .thumb__name{ font-size:14px; }
  .reel__cta,.thumb__cta{ font-size:13px; }

  .contact__intro{ font-size:.98rem; }
  .contact__title{ width:min(320px,86%); }
  .footer img{ width:180px; }
}