*{box-sizing:border-box}:root{--bg:#050505;--text:#f4f4f4;--accent:#E7FF00;--line:rgba(244,244,244,.14);--title:"Boldonse",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden}body.modal-open{overflow:hidden}a{text-decoration:none;color:inherit}button{font:inherit}.texture{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 14%,rgba(231,255,0,.13),transparent 24rem),radial-gradient(circle at 50% 20%,rgba(231,255,0,.07),transparent 36rem);animation:textureDrift 14s ease-in-out infinite alternate}.texture:before{content:"";position:absolute;inset:0;opacity:.62;background:radial-gradient(circle at 50% 16%,rgba(231,255,0,.22),transparent 16rem),radial-gradient(circle at 50% 15%,rgba(231,255,0,.16) 0 1px,transparent 1.2px),radial-gradient(circle at 47% 20%,rgba(231,255,0,.11) 0 1px,transparent 1.15px),radial-gradient(circle at 55% 24%,rgba(231,255,0,.09) 0 1px,transparent 1.15px),linear-gradient(108deg,transparent 0 46%,rgba(231,255,0,.06) 46.05% 46.2%,transparent 46.3%);background-size:auto,7px 7px,11px 11px,16px 16px,100% 100%;-webkit-mask-image:radial-gradient(circle at 50% 18%,black,transparent 49%);mask-image:radial-gradient(circle at 50% 18%,black,transparent 49%)}.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px)}.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#050505;transition:.55s}.loader.done{opacity:0;visibility:hidden}.loader span{display:block;width:min(220px,48vw);height:2px;background:var(--accent);animation:loaderLine .85s}.loader strong{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,244,.72)}.whatsapp{position:fixed;top:26px;right:clamp(20px,4vw,52px);z-index:20;width:48px;height:48px;display:grid;place-items:center;color:var(--accent);border:1px solid rgba(231,255,0,.52);border-radius:999px;background:rgba(0,0,0,.36);backdrop-filter:blur(9px);transition:.22s}.whatsapp:hover{transform:translateY(-2px) scale(1.04);background:rgba(231,255,0,.08)}.whatsapp svg{width:30px;height:30px;fill:currentColor}.side{position:fixed;z-index:10;color:rgba(244,244,244,.74);text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:800;writing-mode:vertical-rl}.left{left:28px;top:18vh;transform:rotate(180deg)}.right{right:28px;top:14vh}.hero{position:relative;z-index:1;padding:52px 20px 34px;border-bottom:1px solid var(--line);overflow:hidden}.hero-glow{position:absolute;top:-122px;left:50%;width:min(620px,52vw);height:min(620px,52vw);transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(231,255,0,.22),transparent 52%),radial-gradient(circle,rgba(231,255,0,.10),transparent 72%);filter:blur(18px);animation:glowBreath 4.8s ease-in-out infinite}.hero-inner{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto;display:grid;justify-items:center;text-align:center}.logo{display:block;width:clamp(270px,28vw,440px);height:auto;margin:0 auto 42px;filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(255,255,255,.18));transition:.38s}.logo:hover{transform:translateY(-2px) scale(1.012);filter:brightness(0) saturate(100%) invert(94%) sepia(100%) saturate(1491%) hue-rotate(10deg) brightness(108%) contrast(107%) drop-shadow(0 0 16px rgba(231,255,0,.78)) drop-shadow(0 0 48px rgba(231,255,0,.40))}.hero-title{margin:0;display:flex;justify-content:center;align-items:baseline;gap:.42em;flex-wrap:wrap;font-family:var(--title);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.2vw,52px);line-height:1.06;letter-spacing:-.05em}.hero-title strong{color:var(--accent);font-weight:400}.hero-tags{margin:22px auto 0;color:rgba(244,244,244,.82);text-transform:uppercase;letter-spacing:.16em;font-size:clamp(10px,.95vw,13px);line-height:1.9;font-weight:800}.hero-tags i{display:inline-block;width:5px;height:5px;margin:0 12px 2px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(231,255,0,.5)}.hero-rotator{margin:10px 0 0;min-height:18px;color:rgba(231,255,0,.86);text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:900}.hero-rotator span{display:inline-block;transition:.25s}.hero-rotator span.changing{opacity:0;transform:translateY(6px)}.scroll{display:grid;justify-items:center;margin-top:22px;color:var(--accent);text-transform:uppercase}.scroll b{font-size:40px;line-height:.8;animation:scrollPulse 1.3s infinite}.scroll small{font-size:10px;font-weight:900}main{position:relative;z-index:1}.projects{width:min(1440px,calc(100% - 56px));margin:0 auto;padding:42px 0 58px}.toolbar{display:grid;grid-template-columns:1fr minmax(220px,320px);gap:20px;align-items:end;margin-bottom:22px}.filters{display:flex;justify-content:space-between;gap:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:14px;border-bottom:1px solid var(--line)}.filter{appearance:none;border:0;background:transparent;color:rgba(244,244,244,.9);text-transform:uppercase;white-space:nowrap;cursor:pointer;padding:8px 0;font-size:13px;font-weight:900;position:relative}.filter:after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:3px;background:var(--accent);transform:scaleX(0);transition:.22s}.filter:hover,.filter.active{color:var(--accent)}.filter.active:after{transform:scaleX(1)}.search input{width:100%;height:42px;border:1px solid rgba(244,244,244,.16);border-radius:999px;background:rgba(255,255,255,.035);color:#f4f4f4;padding:0 18px;outline:none;font:inherit}.search input:focus{border-color:rgba(231,255,0,.55);box-shadow:0 0 24px rgba(231,255,0,.08)}.status{text-align:center;color:rgba(244,244,244,.55);font-size:14px;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;transition:opacity .2s ease}.video-card{aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#0b0b0b;border:1px solid rgba(244,244,244,.16);opacity:0;transform:translateY(16px);animation:cardIn .55s forwards;transition:transform .22s,box-shadow .22s,border-color .22s}.video-button{position:relative;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0b0b0b;overflow:hidden}.video-button img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.05);transform:scale(1.01);transition:.25s}.video-button:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}.video-button:after{content:"";position:absolute;inset:-40% auto -40% -75%;z-index:2;width:42%;background:linear-gradient(90deg,transparent,rgba(231,255,0,.16),transparent);transform:skewX(-18deg);opacity:0;transition:transform .55s ease,opacity .25s ease}.video-card:hover{transform:translateY(-4px);border-color:rgba(231,255,0,.86);box-shadow:0 0 0 1px rgba(231,255,0,.28),0 0 30px rgba(231,255,0,.10)}.video-card:hover img{transform:scale(1.045);filter:saturate(1.06) contrast(1.04);opacity:.84}.video-card:hover .video-button:after{opacity:1;transform:translateX(360%) skewX(-18deg)}.play-icon{position:absolute;z-index:3;left:50%;top:50%;width:58px;height:58px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;color:var(--accent);border:1px solid rgba(231,255,0,.72);background:rgba(0,0,0,.45)}.play-icon svg{width:22px;height:22px;margin-left:3px;fill:currentColor}.video-card:hover .play-icon{color:#111;background:var(--accent)}.video-meta{position:absolute;z-index:3;left:18px;right:18px;bottom:15px;text-align:left;transform:translateY(5px);opacity:.86;transition:.24s}.video-card:hover .video-meta{transform:translateY(0);opacity:1}.video-meta strong{display:block;color:#fff;font-size:14px;font-weight:900;text-transform:uppercase}.video-meta small{color:rgba(244,244,244,.88);font-size:12px}.load-more{display:flex;gap:12px;margin:28px auto 0;padding:8px 18px 12px;border:0;border-bottom:1px solid var(--accent);background:transparent;color:var(--text);text-transform:uppercase;cursor:pointer}.clients{overflow:hidden;padding:40px 0 46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.clients-kicker{text-align:center;margin:0 0 24px;color:rgba(244,244,244,.58);text-transform:uppercase;letter-spacing:.55em;font-size:10px;font-weight:800}.clients-marquee{overflow:hidden}.clients-track{display:flex;align-items:center;gap:clamp(34px,5vw,72px);width:max-content;animation:clientsMoveRight 48s linear infinite}.clients:hover .clients-track{animation-duration:80s}.clients-track img{width:clamp(84px,10vw,148px);height:48px;object-fit:contain;opacity:.62;filter:grayscale(1) brightness(0) invert(1)}.cta{min-height:360px;display:grid;place-items:center;text-align:center;padding:70px 20px 38px}.cta h2{font-family:var(--title);font-weight:400;text-transform:uppercase;font-size:clamp(34px,4.8vw,70px);line-height:1.04;letter-spacing:-.055em;margin:0 0 24px}.cta h2 span,.cta h2 strong{display:block}.cta h2 strong{color:var(--accent);font-weight:400}.cta-button{min-width:min(360px,92vw);min-height:58px;display:inline-flex;align-items:center;justify-content:center;padding:0 28px;border-radius:6px;background:var(--accent);color:#111;text-transform:uppercase;font-weight:900}.cta p{color:rgba(244,244,244,.55);font-size:12px;margin:26px 0 0}.modal{position:fixed;inset:0;display:none;place-items:center;z-index:70;padding:clamp(16px,4vw,42px)}.modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(9px);animation:backdropIn .22s}.modal-content{position:relative;width:min(1220px,92vw);background:#0d0d0d;border:1px solid rgba(231,255,0,.38);border-radius:10px;padding:12px;animation:playerPop .26s}.modal-close{position:absolute;top:-17px;right:-17px;width:43px;height:43px;border-radius:999px;border:0;background:var(--accent);color:#111;font-size:28px;cursor:pointer}.player-wrap{aspect-ratio:16/9;background:#000}iframe{width:100%;height:100%;border:0}.next-video{margin:14px 2px 0 auto;display:block;border:0;background:transparent;color:rgba(244,244,244,.68);cursor:pointer;text-transform:uppercase}.cursor-dot{position:fixed;left:0;top:0;z-index:999;width:14px;height:14px;border:1px solid rgba(244,244,244,.9);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:.18s}.cursor-dot.active{width:34px;height:34px;background:rgba(231,255,0,.12);border-color:#E7FF00;box-shadow:0 0 30px rgba(231,255,0,.22)}.reveal{opacity:0;transform:translateY(18px);transition:.72s}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes loaderLine{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes scrollPulse{50%{transform:translateY(7px)}}@keyframes cardIn{to{opacity:1;transform:translateY(0)}}@keyframes clientsMoveRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes textureDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-12px,0) scale(1.03)}}@keyframes glowBreath{0%,100%{opacity:.78;transform:translateX(-50%) scale(.98)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}@keyframes backdropIn{from{opacity:0}to{opacity:1}}@keyframes playerPop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}@media(max-width:980px){.side,.cursor-dot{display:none}.toolbar{grid-template-columns:1fr}.projects{width:min(100% - 32px,900px)}.filters{justify-content:flex-start}.grid{grid-template-columns:repeat(2,1fr)}.hero-title{flex-direction:column;gap:.04em}}@media(max-width:640px){.hero{padding:82px 18px 34px}.logo{width:min(340px,84vw);margin-bottom:28px}.hero-title{font-size:clamp(27px,9.2vw,44px)}.grid{grid-template-columns:1fr}}
/* v3.4 thumb loading */
.video-button img{opacity:0}
.video-button img.is-loaded{opacity:1}


/* v3.5 — Front-end premium polish */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);
}

/* Loader with brand signature */
.loader {
  background:
    radial-gradient(circle at 50% 42%, rgba(231,255,0,.08), transparent 26rem),
    #050505;
}
.loader::before {
  content: "TUPI";
  position: absolute;
  color: #E7FF00;
  font-family: var(--title);
  font-size: clamp(30px, 5vw, 72px);
  letter-spacing: -.07em;
  opacity: 0;
  transform: translateY(10px);
  text-shadow: 0 0 30px rgba(231,255,0,.24);
  animation: tupiLoaderMark .85s var(--ease-out) forwards;
}
.loader span,
.loader strong {
  transform: translateY(62px);
}

/* Hero refined entrance */
.hero {
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(231,255,0,.045) 42.1% 42.25%, transparent 42.35%),
    radial-gradient(circle at 50% 14%, rgba(231,255,0,.075), transparent 20rem);
  opacity: .75;
  animation: tupiHeroSweep 9s ease-in-out infinite alternate;
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.logo {
  will-change: transform, filter;
}
.hero-title span,
.hero-title strong,
.hero-tags,
.hero-rotator,
.scroll {
  will-change: transform, opacity;
}
.hero-title span {
  animation: heroLineIn .9s var(--ease-out) both .12s;
}
.hero-title strong {
  animation: heroLineIn .9s var(--ease-out) both .25s;
}
.hero-tags {
  animation: heroLineIn .9s var(--ease-out) both .38s;
}
.hero-rotator,
.scroll {
  animation: heroLineIn .9s var(--ease-out) both .48s;
}
.hero-glow {
  animation: glowBreath 5.4s ease-in-out infinite, heroFloat 11s ease-in-out infinite alternate;
}

/* Filters */
.filter {
  transition: color .22s var(--ease-smooth), transform .22s var(--ease-smooth);
}
.filter:hover {
  transform: translateY(-1px);
}
.filter:active {
  transform: translateY(1px) scale(.98);
}

/* Premium video hover */
.video-card {
  transform-origin: center;
  transition:
    transform .34s var(--ease-out),
    box-shadow .34s var(--ease-out),
    border-color .24s ease;
}
.video-card:hover {
  transform: translateY(-6px) scale(1.008);
}
.video-button img {
  transition:
    transform .55s var(--ease-out),
    filter .45s ease,
    opacity .3s ease;
}
.video-button::before {
  transition: opacity .28s ease, background .35s ease;
}
.video-card:hover .video-button::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(231,255,0,.10), transparent 38%),
    linear-gradient(180deg, transparent 38%, rgba(0,0,0,.78));
}
.video-button::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -80%;
  z-index: 2;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(231,255,0,.16), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .25s ease;
}
.video-card:hover .video-button::after {
  opacity: 1;
  transform: translateX(380%) skewX(-18deg);
}
.play-icon {
  transition:
    transform .28s var(--ease-out),
    background .22s ease,
    color .22s ease,
    box-shadow .28s ease;
}
.video-card:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 38px rgba(231,255,0,.24);
}
.video-meta {
  transition:
    transform .3s var(--ease-out),
    opacity .3s ease;
}
.video-card:hover .video-meta {
  transform: translateY(-3px);
}

/* Better modal/player */
.modal {
  opacity: 0;
  visibility: hidden;
  display: grid !important;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-backdrop {
  opacity: 0;
  transition: opacity .28s ease, backdrop-filter .28s ease;
}
.modal.open .modal-backdrop {
  opacity: 1;
  backdrop-filter: blur(12px);
}
.modal-content {
  opacity: 0;
  transform: translateY(12px) scale(.965);
  transition:
    opacity .28s var(--ease-out),
    transform .34s var(--ease-out);
}
.modal.open .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.modal-close,
.next-video,
.cta-button,
.whatsapp {
  transition:
    transform .22s var(--ease-out),
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}
.modal-close:hover,
.cta-button:hover,
.whatsapp:hover {
  transform: translateY(-2px) scale(1.04);
}
.next-video:hover {
  transform: translateX(4px);
}

/* CTA */
.cta h2 strong {
  text-shadow:
    0 0 18px rgba(231,255,0,.22),
    0 0 44px rgba(231,255,0,.12);
}
.cta-button {
  position: relative;
  overflow: hidden;
}
.cta-button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-16deg);
  opacity: 0;
}
.cta-button:hover::after {
  animation: buttonShine .75s var(--ease-out);
}

/* Client marquee */
.clients-track {
  transition: filter .3s ease;
}
.clients:hover .clients-track {
  filter: drop-shadow(0 0 16px rgba(231,255,0,.08));
}

/* Cursor */
.cursor-dot {
  mix-blend-mode: difference;
}
.cursor-dot.active {
  mix-blend-mode: normal;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@keyframes tupiLoaderMark {
  0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(8px); }
  70% { opacity: 1; filter: blur(0); }
  100% { opacity: .92; transform: translateY(0) scale(1); }
}
@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tupiHeroSweep {
  from { transform: translateX(-1.5%) translateY(0); opacity: .45; }
  to { transform: translateX(1.5%) translateY(-10px); opacity: .78; }
}
@keyframes heroFloat {
  from { margin-top: 0; }
  to { margin-top: 10px; }
}
@keyframes buttonShine {
  from { opacity: 0; transform: translateX(0) skewX(-16deg); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translateX(520%) skewX(-16deg); }
}


/* v3.6 — Cinematic Experience */

/* Logo as a living signature */
.logo {
  transition:
    filter .42s var(--ease-out),
    transform .42s var(--ease-out);
}
.logo:hover {
  animation: logoPulseCinematic 1.35s ease-in-out both;
}

/* Grid gains cinematic depth */
.grid {
  perspective: 1200px;
}
.grid:has(.video-card:hover) .video-card:not(:hover) {
  opacity: .64;
  transform: scale(.985);
  filter: saturate(.72);
}
.video-card {
  backface-visibility: hidden;
}
.video-card:hover {
  z-index: 4;
}

/* Stagger-ready cards */
.video-card.is-entering {
  opacity: 0;
  transform: translateY(18px) scale(.985);
}
.video-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Active filter feels like a moving interface */
.filters {
  position: relative;
}
.filter {
  border-radius: 999px;
}
.filter.active {
  text-shadow: 0 0 18px rgba(231,255,0,.16);
}

/* Player: more cinematic, less abrupt */
.modal {
  --player-ease: cubic-bezier(.16, 1, .3, 1);
}
.modal-backdrop {
  background:
    radial-gradient(circle at 50% 38%, rgba(231,255,0,.08), transparent 32rem),
    rgba(0,0,0,.86);
}
.modal-content {
  border-color: rgba(231,255,0,.42);
  box-shadow:
    0 30px 120px rgba(0,0,0,.76),
    0 0 60px rgba(231,255,0,.08);
}
.modal.open .modal-content {
  animation: playerCinematicIn .38s var(--player-ease) both;
}
.modal:not(.open) .modal-content {
  animation: none;
}
.player-wrap {
  position: relative;
}
.player-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.modal-close {
  box-shadow: 0 0 24px rgba(231,255,0,.22);
}
.next-video {
  padding: 10px 0;
  color: rgba(244,244,244,.78);
}
.next-video::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 10px;
  vertical-align: middle;
  background: #E7FF00;
  transform: scaleX(.5);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.next-video:hover::after {
  transform: scaleX(1);
}

/* CTA more cinematic */
.cta {
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(660px, 70vw);
  height: min(660px, 70vw);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,255,0,.08), transparent 58%);
  pointer-events: none;
  animation: ctaGlow 6s ease-in-out infinite;
}

/* Extra polish on clients */
.clients-track img {
  transition:
    opacity .22s ease,
    transform .22s var(--ease-out),
    filter .22s ease;
}
.clients-track img:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.08);
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 0 12px rgba(231,255,0,.18));
}

@keyframes logoPulseCinematic {
  0% {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255,255,255,.18));
  }
  42% {
    filter:
      brightness(0) saturate(100%) invert(94%) sepia(100%) saturate(1491%) hue-rotate(10deg) brightness(108%) contrast(107%)
      drop-shadow(0 0 18px rgba(231,255,0,.84))
      drop-shadow(0 0 56px rgba(231,255,0,.42));
  }
  100% {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255,255,255,.18));
  }
}
@keyframes playerCinematicIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.955);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes ctaGlow {
  0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.94); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.04); }
}


/* v3.7 — Final visual polish */

/* Organic, subtle film texture */
.grain {
  opacity: .18;
  animation: grainShift 1.8s steps(2) infinite;
}

/* Dynamic light layer controlled by JS */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .62;
  background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 20%), rgba(231,255,0,.13), transparent 21rem);
  transition: opacity .25s ease;
  mix-blend-mode: screen;
}

/* Hero more premium without being louder */
.hero-title strong {
  text-shadow:
    0 0 16px rgba(231,255,0,.20),
    0 0 46px rgba(231,255,0,.10);
}

/* Make thumbs feel alive */
.video-card:hover .video-button img {
  transform: scale(1.062);
  filter: saturate(1.12) contrast(1.08) brightness(1.03);
}

/* Slight focus ring for keyboard users */
.video-button:focus-visible,
.filter:focus-visible,
.cta-button:focus-visible,
.whatsapp:focus-visible,
.modal-close:focus-visible,
.next-video:focus-visible {
  outline: 2px solid #E7FF00;
  outline-offset: 4px;
}

/* Player staging: backdrop, player, controls */
.modal.open .modal-backdrop {
  transition-delay: 0ms;
}
.modal.open .modal-content {
  transition-delay: 80ms;
}
.modal.open .next-video {
  animation: controlsIn .45s var(--ease-out) both .22s;
}

/* Player top light */
.modal-content::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,255,0,.72), transparent);
  opacity: .72;
}

/* Next project affordance */
.next-video {
  position: relative;
  min-height: 42px;
}
.next-video span {
  color: #E7FF00;
}

/* End screen inside modal */
.player-end-card {
  position: absolute;
  inset: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 38%, rgba(231,255,0,.12), transparent 24rem),
    rgba(5,5,5,.92);
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transition:
    opacity .28s var(--ease-out),
    transform .28s var(--ease-out);
}
.player-end-card.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.player-end-card-inner {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.player-end-card small {
  color: rgba(244,244,244,.58);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
}
.player-end-card strong {
  font-family: var(--title);
  color: #E7FF00;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-weight: 400;
}
.player-end-card button {
  margin-top: 6px;
  min-height: 46px;
  border: 1px solid rgba(231,255,0,.68);
  border-radius: 999px;
  background: #E7FF00;
  color: #111;
  padding: 0 22px;
  text-transform: uppercase;
  font-weight: 950;
  cursor: pointer;
}

/* Smoother client marquee feel */
.clients-marquee {
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* Slightly more premium scroll arrow */
.scroll b {
  text-shadow: 0 0 16px rgba(231,255,0,.34);
}

/* Final performance hints */
.texture,
.hero-glow,
.video-card,
.modal-content {
  will-change: transform, opacity;
}

@keyframes grainShift {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-1%,1%,0); }
  50% { transform: translate3d(1%,-1%,0); }
  75% { transform: translate3d(-.5%,-.5%,0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes controlsIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .player-end-card {
    inset: 8px;
    padding: 18px;
  }
}