/* ========================================================= MANNY — mannypacquiaomovie.com ========================================================= */ :root{ --bg:#050506; --bg-2:#0b0b0d; --ink:#f4f4f5; --muted:#9a9aa2; --dim:#6a6a72; --red:#e11b22; --red-hi:#ff2f36; --red-deep:#7d1116; --line:rgba(255,255,255,.10); --wrap:1180px; --gut:clamp(20px,5vw,56px); --r:14px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} ::selection{background:var(--red);color:#fff} :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; border-radius:4px; } .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--red);color:#fff;padding:12px 20px;font-weight:600; } .skip:focus{left:12px;top:12px} .wrap{ width:100%;max-width:var(--wrap); margin-inline:auto;padding-inline:var(--gut); } /* ---------- shared type ---------- */ .eyebrow{ font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--red);margin:0 0 14px; } .h2{ font-family:'Anton',Impact,'Arial Narrow',sans-serif; font-weight:400; font-size:clamp(38px,6.2vw,76px); line-height:.94; letter-spacing:.005em; text-transform:uppercase; margin:0 0 22px; } .dot{color:var(--red)} .lede{ font-size:clamp(17px,1.9vw,20px); line-height:1.6; color:#d2d2d8; max-width:62ch; margin:0 0 30px; } .note{ font-size:14.5px;color:var(--dim);max-width:62ch;margin:34px 0 0; padding-top:22px;border-top:1px solid var(--line); } .note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px} .note a:hover{color:var(--ink)} .sec{padding:clamp(76px,11vw,140px) 0;position:relative} /* ---------- buttons ---------- */ .btn{ --pad:15px 30px; display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:var(--pad); border-radius:100px; font-size:15px;font-weight:600;letter-spacing:.01em; text-decoration:none;white-space:nowrap; border:1px solid transparent; transition:transform .2s var(--ease),background-color .2s,border-color .2s,box-shadow .2s; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--red{ background:var(--red);color:#fff; box-shadow:0 6px 26px -8px rgba(225,27,34,.85); } .btn--red:hover{background:var(--red-hi);box-shadow:0 12px 34px -8px rgba(225,27,34,.95)} .btn--ghost{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); color:var(--ink); backdrop-filter:blur(8px); } .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)} .btn--sm{--pad:10px 20px;font-size:13.5px} /* ---------- nav ---------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:100; transition:background-color .3s,backdrop-filter .3s,border-color .3s; border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(5,5,6,.82); backdrop-filter:blur(14px) saturate(150%); border-bottom-color:var(--line); } .nav__in{ max-width:var(--wrap);margin-inline:auto; padding:16px var(--gut); display:flex;align-items:center;gap:26px; } .nav__brand{ font-family:'Anton',Impact,sans-serif;font-size:24px;letter-spacing:.06em; text-transform:uppercase;text-decoration:none;line-height:1; } .nav__links{display:flex;gap:26px;margin-left:auto} .nav__links a{ font-size:14px;font-weight:500;color:var(--muted);text-decoration:none; transition:color .2s; } .nav__links a:hover{color:var(--ink)} .nav__toggle{display:none} /* ---------- HERO ---------- */ /* Static by default: one viewport, everything in its final pose. With .scrub on (set pre-paint unless reduced motion), the section grows tall, the pin goes sticky, and JS drives the stage through --s* variables: full body under the wordmark -> push in to the gloves -> settle into the marketing frame. Scroll position IS the timeline. */ .hero{position:relative} .hero__pin{ position:sticky;top:0; height:100svh; display:flex;align-items:center; padding:120px 0 clamp(60px,9vh,110px); overflow:hidden; isolation:isolate; /* The pin (sticky + isolation) IS the stacking context the screen-blended layers resolve against — they never see the page background. Painting the page background here makes that backdrop explicit, so the blends stay correct even if the page background ever changes. */ background:var(--bg); } html.scrub .hero{height:340svh} /* z-index:0 makes the stage its own stacking context so the layer order below stays INSIDE it — otherwise .hero__vig/.hero__scrim would outrank .hero__content (z-index:2) and paint over the headline and CTAs. Safe now that no blend mode needs an un-isolated backdrop. */ .hero__stage{position:absolute;inset:0;z-index:0;pointer-events:none} /* Paint order. screen-blending used to make white letters land solid white on top of the figure regardless of order; with real alpha the figure would simply occlude them, so the wordmark is stacked above it to reproduce the original look. Safe to use z-index freely now — no blend left to isolate. */ .hero__glow {z-index:0} .hero__figure{z-index:1} .hero__reel {z-index:1} /* before .hero__punch in DOM, so the punch paints over it */ .hero__punch {z-index:1} .hero__word {z-index:2} .hero__vig {z-index:3} .hero__scrim {z-index:4} .hero__stagetag{z-index:5} /* Parallax + scrub layers. The pointer engine writes --px/--py; the scrub engine writes the rest. Every layer composes them in its own transform. */ [data-depth]{--px:0px;--py:0px} .hero__glow,.hero__word{will-change:transform} .hero__glow{ position:absolute; left:50%;top:6%; width:min(1150px,125vw);aspect-ratio:1; transform:translateX(-50%) translate3d(var(--px),var(--py),0) scale(var(--gs,1)); background: radial-gradient(circle at 50% 42%, rgba(225,27,34,.30) 0%, rgba(225,27,34,.10) 34%, transparent 66%), radial-gradient(circle at 50% 46%, rgba(120,150,255,.13) 0%, transparent 58%); filter:blur(18px); } /* Giant stage wordmark — the opening frame of the scrub. Hidden in static mode (the content column's h1 carries the name there). */ .hero__word{ position:absolute;left:0;right:0;top:44%; transform:translate3d(0,calc(-50% + var(--wy,0px)),0); text-align:center; font-family:'Anton',Impact,sans-serif; font-size:clamp(96px,21vw,330px); line-height:.8; letter-spacing:var(--wls,.02em); /* trailing letter-space widens the line box; matching padding-left keeps the centered word from sliding left as tracking animates */ padding-left:var(--wls,.02em); opacity:var(--wo,0); user-select:none; } html.scrub .hero__word{opacity:var(--wo,1)} .hero__word span{ background:linear-gradient(176deg,#fff 6%,#d8d8de 44%,#5d5d66 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* The figure — the subject of the scrub. transform-origin sits on the crossed gloves so scale() reads as a camera push-in on them. */ .hero__figure{ position:absolute; left:auto;right:-3%;bottom:-3%; height:min(1022px,104svh); transform:translate3d(calc(var(--sx,0px) + var(--px)),calc(var(--sy,0px) + var(--py)),0) scale(var(--ss,1)); transform-origin:46% 78%; } html.scrub .hero__figure{--sx:-34vw;--ss:1.02;--fo:1} .hero__figure img{ height:100%;width:auto; opacity:var(--fo,0); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 11%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 11%,#000 88%,transparent 100%); } /* The punch — the scrub's second act and the FINAL figure. Two layers cut from one photograph so they register exactly: the extended fist arrives first, the body resolves beneath it, then the fist crop hands off to the body's own glove pixels. Percentages map the glove crop onto its source pixels within the portrait body crop. */ .hero__punch{ position:absolute; right:-4%;bottom:-3%; height:min(1000px,102svh); aspect-ratio:2960/3744; } /* NOTE: no left/top in this shared rule. `.hero__punch picture` is (0,1,1) and would out-specify the per-layer classes (0,1,0), pinning the glove crop to the wrapper corner instead of onto the fist — which renders as a second, misaligned glove. Each layer sets its own offset below. */ .hero__punch picture{position:absolute} .hero__punch-body{ left:0;top:0;width:100%; transform:translate3d(var(--px),calc(var(--ky,0px) + var(--py)),0) scale(var(--ks,1)); transform-origin:71% 53%; } .hero__punch-body img{opacity:var(--po,1)} /* The film reel — a widescreen beat of the movie itself, opened where the figure just dissolved. Its edges feather into the stage with a painted radial overlay (the site's proven pattern — no masks, no blend modes, both of which Safari drops on composited layers). Hidden by default, so the static fallback never shows a stalled video frame. */ .hero__reel{ position:absolute; left:62%;top:46%; width:min(58vw,980px);aspect-ratio:16/9; transform:translate3d(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)),0) scale(var(--rs,1)); opacity:var(--ro,0); } .hero__reel video{width:100%;height:100%;object-fit:cover;display:block} .hero__reel-fade{ position:absolute;inset:-2px; /* per-side linear feathers melt every straight edge into the stage (the ellipse alone left the edge midpoints uncovered — a visible box), plus a mild radial to keep the corners heavier than the centre */ background: linear-gradient(90deg,var(--bg) 0%,transparent 16%,transparent 84%,var(--bg) 100%), linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%), radial-gradient(ellipse 92% 92% at 50% 50%,transparent 52%,rgba(5,5,6,.5) 100%); } .hero__punch-glove{ left:39.86%;top:29.38%;width:62.50%; transform:translate3d(var(--px),calc(var(--ky,0px) + var(--py)),0) scale(var(--ks,1)); transform-origin:49.8% 49.9%; } .hero__punch-glove img{opacity:var(--pgo,0)} .hero__punch img{width:100%;height:auto} html.scrub .hero__punch{--po:0;--pgo:0} .hero__vig{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(5,5,6,.88) 0%,transparent 20%,transparent 62%,rgba(5,5,6,.42) 88%,var(--bg) 100%), radial-gradient(ellipse 96% 86% at 62% 50%,transparent 52%,rgba(5,5,6,.55) 100%); } /* Left-side copy protection — belongs to the final frame; scrubbed in late. */ .hero__scrim{ position:absolute;inset:0; background:radial-gradient(ellipse 54% 60% at 19% 56%,rgba(5,5,6,.90) 0%,rgba(5,5,6,.60) 46%,transparent 96%); opacity:var(--so,1); } html.scrub .hero__scrim{opacity:var(--so,0)} /* Mid-scrub tagline — breathes in during the push-in, gone before the frame. */ .hero__stagetag{ position:absolute;left:8%;top:50%; margin:0;max-width:9ch; transform:translate3d(0,calc(-50% + var(--ty,0px)),0); font-family:'Anton',Impact,sans-serif; font-size:clamp(34px,4.6vw,64px); line-height:1.04;text-transform:uppercase;letter-spacing:.01em; color:#f2f2f4;text-shadow:0 4px 30px rgba(5,5,6,.85); opacity:var(--to,0); } .hero__content{ position:relative;z-index:2; width:100%;max-width:var(--wrap); margin-inline:auto;padding-inline:var(--gut); transform:translate3d(0,calc(var(--py,0px) + var(--cy,0px)),0); opacity:var(--co,1); } /* opacity-only: the h1 and CTAs stay in the accessibility tree and tab order during the intro; a focusin listener in the JS fast-forwards the scrub so anything focused is instantly visible (the Apple pattern). */ html.scrub .hero__content{opacity:var(--co,0);pointer-events:none} html.scrub .hero__content.is-live{pointer-events:auto} .hero__content > *{max-width:min(600px,54vw)} .pill{ display:inline-flex;align-items:center;gap:9px; padding:7px 16px 7px 13px;margin:0 0 24px; border:1px solid rgba(225,27,34,.42); border-radius:100px; background:rgba(225,27,34,.11); backdrop-filter:blur(8px); font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; } .pill__dot{ width:7px;height:7px;border-radius:50%;background:var(--red-hi); box-shadow:0 0 0 0 rgba(255,47,54,.7); animation:ping 2.2s var(--ease) infinite; } @keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(255,47,54,.7)} 70%{box-shadow:0 0 0 11px rgba(255,47,54,0)} 100%{box-shadow:0 0 0 0 rgba(255,47,54,0)} } .hero__h1{margin:0 0 18px} .hero__mark{ display:block; font-family:'Anton',Impact,sans-serif;font-weight:400; font-size:clamp(76px,16vw,192px); line-height:.82;letter-spacing:.005em;text-transform:uppercase; background:linear-gradient(176deg,#fff 6%,#e8e8ec 40%,#8e8e97 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 22px 60px rgba(0,0,0,.6); } .hero__sub{ display:block;margin-top:14px; font-size:clamp(13px,1.6vw,16px);font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--muted); } .hero__tag{ font-size:clamp(17px,2.1vw,21px); color:#dcdce1;max-width:32ch;margin:0 0 32px; text-shadow:0 2px 18px rgba(5,5,6,.9); } .hero__cta{display:flex;flex-wrap:wrap;gap:13px} .hero__meta{ margin:34px 0 0;font-size:13.5px;line-height:1.85; color:#8b8b93;letter-spacing:.02em; text-shadow:0 1px 12px rgba(5,5,6,.95),0 1px 3px rgba(5,5,6,.9); } .hero__meta strong{color:var(--muted);font-weight:600} .hero__scroll{ position:absolute;left:50%;bottom:26px;z-index:3; transform:translateX(-50%); width:26px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:100px; display:grid;place-items:start center;padding-top:8px; opacity:var(--cue,1); } .hero__scroll.is-hidden{visibility:hidden;pointer-events:none} .hero__scroll span{ width:3px;height:8px;border-radius:2px;background:rgba(255,255,255,.7); animation:drop 1.9s var(--ease) infinite; } @keyframes drop{0%,100%{transform:translateY(0);opacity:0}45%{transform:translateY(13px);opacity:1}} /* ---------- where to watch ---------- */ .sec--watch{ background: linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 40%,var(--bg-2) 100%); } .plats{ list-style:none;margin:44px 0 0;padding:0; display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .plat a{ position:relative;display:block;height:100%; padding:26px 26px 24px; display:flex;flex-direction:column; border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); text-decoration:none;overflow:hidden; transition:transform .22s var(--ease),border-color .22s,background-color .22s; } .plat a::after{ content:"";position:absolute;inset:0;border-radius:var(--r); background:radial-gradient(ellipse 62% 100% at 50% 0%,var(--tint,rgba(255,255,255,.16)),transparent 68%); opacity:0;transition:opacity .28s; } .plat a:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)} .plat a:hover::after{opacity:1} .plat a>*{position:relative;z-index:1} .plat--netflix{--tint:rgba(229,9,20,.34)} .plat--prime {--tint:rgba(0,168,225,.30)} .plat--apple {--tint:rgba(255,255,255,.20)} .plat__name{ display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px; } .plat__mode{display:block;font-size:14px;color:var(--muted)} .plat__go{ display:block;margin-top:auto;padding-top:20px;font-size:13.5px;font-weight:600;color:var(--ink); opacity:.55;transition:opacity .2s,transform .2s var(--ease); } .plat a:hover .plat__go{opacity:1;transform:translateX(4px)} /* ---------- trailer ---------- */ .sec--trailer{background:var(--bg-2)} .player{ position:relative;margin-top:40px; aspect-ratio:16/9;border-radius:var(--r);overflow:hidden; cursor:pointer;background:#000; border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); } .player__thumb{ width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease),opacity .3s; opacity:.82; } .player:hover .player__thumb{transform:scale(1.035);opacity:1} .player__btn{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:82px;height:82px;border-radius:50%; display:grid;place-items:center; background:var(--red);color:#fff; padding-left:5px; box-shadow:0 12px 44px -8px rgba(225,27,34,.9); transition:transform .26s var(--ease),background-color .2s; } .player:hover .player__btn{transform:translate(-50%,-50%) scale(1.1);background:var(--red-hi)} .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- the record: the eight-division climb ---------- */ /* The bar length encodes the weight limit (112lb -> 26%, 154lb -> 100%), so the list literally draws the forty-two pound climb rather than just listing it. */ .sec--record{background:var(--bg-2);position:relative;overflow:hidden} /* Top-down ring behind the divisions. Vector, not a photo: crisp at any size, free, and it stays quiet under the type instead of competing with it. */ .rec__stage{position:relative} /* Photoreal ring-corner plate (Higgsfield, MANNYWEB_RING_CORNER_v1), mirrored so its falloff lands under the type. Parallaxes on its own depth via the pointer/scroll engine — data-depth on the element, --px/--py composed here. */ .ring{ /* Plan-view ring plate: square, so it BRACKETS the divisions list instead of cutting across it — the corner plate's converging ropes fought the horizontal weight bars. Sized to the list and parallaxed on its own depth. */ position:absolute; left:50%;top:50%; width:min(1120px,116%);aspect-ratio:1; transform:translate3d(calc(-50% + var(--px,0)),calc(-50% + var(--py,0)),0); pointer-events:none;z-index:0; opacity:.42; -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 34%,transparent 88%); mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 34%,transparent 88%); } .ring img{width:100%;height:auto;display:block} /* the record's own content sits above the ring */ .sec--record .wrap > *{position:relative;z-index:1} .rec__stage .rec{position:relative;z-index:1} .rec{ list-style:none;margin:48px 0 0;padding:0; border-top:1px solid var(--line); } .rec__row{ display:grid; grid-template-columns:76px minmax(190px,1.05fr) minmax(0,1fr); align-items:center;gap:8px 26px; padding:18px 0; border-bottom:1px solid var(--line); transition:background-color .25s; } .rec__row:hover{background:rgba(255,255,255,.028)} .rec__yr{ font-family:'Anton',Impact,sans-serif;font-size:20px; color:var(--muted);letter-spacing:.02em; } .rec__row:hover .rec__yr{color:var(--red-hi)} .rec__div{ font-family:'Anton',Impact,sans-serif; font-size:clamp(17px,2vw,23px); text-transform:uppercase;letter-spacing:.015em;line-height:1.1; display:flex;flex-wrap:wrap;align-items:baseline;gap:10px; } .rec__belt{ font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--red);border:1px solid rgba(225,27,34,.42); border-radius:100px;padding:3px 9px;white-space:nowrap; } .rec__opp{ grid-column:2; font-size:14px;color:var(--dim);margin-top:-4px; } .rec__opp sup{color:var(--red);margin-left:1px} /* the climb */ .rec__track{ grid-column:3;grid-row:1 / span 2; display:flex;align-items:center;gap:14px; } .rec__bar{ height:9px;border-radius:100px; width:var(--pct); background:linear-gradient(90deg,var(--red-deep),var(--red) 62%,var(--red-hi)); box-shadow:0 0 22px -6px rgba(225,27,34,.9); transform-origin:left center; transform:scaleX(var(--grow,1)); } .rec__wt{ font-family:'Anton',Impact,sans-serif;font-size:22px; color:var(--ink);white-space:nowrap; } .rec__wt i{ font-family:'Inter',sans-serif;font-style:normal;font-size:11px; font-weight:600;color:var(--dim);margin-left:3px;letter-spacing:.06em; } .rec__note{ margin:22px 0 0;font-size:13px;line-height:1.7;color:var(--dim);max-width:70ch; } .rec__note sup{color:var(--red)} /* honours */ .honors{ list-style:none;margin:54px 0 0;padding:0; display:grid;gap:14px; grid-template-columns:repeat(2,1fr); } .honors li.honors--wide{grid-column:1 / -1} .honors li.honors--wide strong{font-size:clamp(23px,3vw,34px)} .honors li{ padding:24px;border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014)); display:flex;flex-direction:column;gap:7px; } .honors__yr{ font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--red); } .honors strong{ font-family:'Anton',Impact,sans-serif;font-weight:400; font-size:clamp(19px,2.2vw,25px);text-transform:uppercase;letter-spacing:.01em; line-height:1.08; } .honors span:last-child{font-size:13.5px;color:var(--muted);line-height:1.55} /* Guinness World Records — official heading wording, quoted exactly. */ .gwr{ margin:52px 0 0;padding:34px 0 0; border-top:1px solid var(--line); } .gwr__label{ margin:0 0 26px; font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--muted); display:flex;align-items:center;gap:12px; } .gwr__label::after{ content:"";flex:1;height:1px; background:linear-gradient(90deg,var(--line),transparent); } .gwr__list{ list-style:none;margin:0;padding:0; display:grid;gap:30px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .gwr__list li{display:flex;flex-direction:column;gap:9px} .gwr__val{ font-family:'Anton',Impact,sans-serif; font-size:clamp(52px,7vw,82px);line-height:.82; background:linear-gradient(176deg,#fff 10%,#cfcfd6 46%,#7a7a84 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .gwr__val i{ font-family:'Inter',sans-serif;font-style:normal; font-size:15px;font-weight:600;letter-spacing:.04em; color:var(--dim);margin-left:5px; -webkit-text-fill-color:var(--dim); } .gwr__list strong{ font-weight:600;font-size:15px;line-height:1.4;color:var(--ink); max-width:30ch; } .gwr__meta{font-size:13px;color:var(--dim);line-height:1.5} /* ---------- about ---------- */ .film{ display:grid;gap:clamp(40px,6vw,76px); grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr); align-items:start; } .film__copy p{color:#c9c9d0;margin:0 0 20px;max-width:62ch} .film__copy strong{color:var(--ink);font-weight:600} .credits{ list-style:none;margin:36px 0 0;padding:26px 0 0; border-top:1px solid var(--line); display:grid;gap:12px; } .credits li{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14.5px} .credits span{ min-width:132px;color:var(--dim); font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; padding-top:3px; } .credits strong{font-weight:500;color:var(--ink)} .film__art{margin:0} .film__art img{ border-radius:var(--r); border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.95); } /* ---------- featuring ---------- */ .sec--feat{padding-block:clamp(56px,8vw,90px);background:var(--bg-2)} .feat{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;gap:12px 0; align-items:center; } .feat li{ font-family:'Anton',Impact,sans-serif; font-size:clamp(20px,3.1vw,34px); text-transform:uppercase;letter-spacing:.02em; color:#5c5c66; transition:color .25s; } .feat li:hover{color:var(--ink)} .feat li:not(:last-child)::after{ content:"";display:inline-block; width:6px;height:6px;border-radius:50%;background:var(--red); margin:0 clamp(14px,2.2vw,26px);vertical-align:middle; } /* ---------- gallery ---------- */ .gal{ display:grid;gap:12px; grid-template-columns:repeat(3,1fr); padding:36px var(--gut) 0; max-width:1560px;margin-inline:auto; } .gal__i{margin:0;overflow:hidden;border-radius:10px;background:#0d0d10} .gal__i--w{grid-column:span 2} .gal__i img{ width:100%;height:100%;object-fit:cover;aspect-ratio:3/2; transition:transform .7s var(--ease),opacity .4s; opacity:.86; } .gal__i:hover img{transform:scale(1.05);opacity:1} /* ---------- faq ---------- */ .faq{margin-top:36px;max-width:78ch} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer; padding:22px 44px 22px 0;position:relative; font-size:clamp(16px,2vw,19px);font-weight:600; transition:color .2s; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--red-hi)} .faq summary::after{ content:"";position:absolute;right:8px;top:50%; width:11px;height:11px; border-right:2px solid var(--red);border-bottom:2px solid var(--red); transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease); } .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq p{margin:0 0 24px;color:#bdbdc5;max-width:70ch} .faq a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* ---------- closing ---------- */ .sec--end{ position:relative;overflow:hidden;isolation:isolate; text-align:center;background:var(--bg); padding-block:clamp(110px,16vw,190px); } .end__bg{position:absolute;inset:-10% -5%;pointer-events:none} .end__bg img{ width:100%;height:100%;object-fit:cover;object-position:50% 20%; transform:translate3d(var(--px),var(--py),0); opacity:.42;filter:saturate(.8) contrast(1.05); will-change:transform; } .end__scrim{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,var(--bg) 0%,rgba(5,5,6,.66) 26%,rgba(5,5,6,.70) 72%,var(--bg) 100%), radial-gradient(ellipse 68% 120% at 50% 100%,rgba(225,27,34,.24),transparent 64%); } .end{position:relative;z-index:1} .end__h{ font-family:'Anton',Impact,sans-serif;font-weight:400; font-size:clamp(54px,11vw,140px);line-height:.9; text-transform:uppercase;margin:0 0 30px; } .end .hero__cta{justify-content:center} /* ---------- footer ---------- */ .foot{ border-top:1px solid var(--line); padding:56px 0 44px;background:#030304; } .foot__in{display:grid;gap:22px;justify-items:center;text-align:center} .foot__brand{ font-family:'Anton',Impact,sans-serif;font-size:30px;letter-spacing:.06em; text-transform:uppercase;margin:0; } .foot__links,.foot__social{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center} .foot__social{list-style:none;margin:0;padding:0} .foot__links a,.foot__social a{ font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s; } .foot__links a:hover,.foot__social a:hover{color:var(--ink)} .foot__fine{ margin:10px 0 0;font-size:12.5px;line-height:1.9;color:var(--dim);max-width:60ch; } .foot__fine span{color:#48484f} /* ---------- scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(26px)} .reveal .rec__bar{--grow:0;transition:transform .9s var(--ease)} .reveal.in .rec__bar{--grow:1} .reveal.in{ opacity:1;transform:none; transition:opacity .8s var(--ease),transform .8s var(--ease); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1000px){ .film{grid-template-columns:1fr} .film__art{max-width:340px;margin-inline:auto} .gal{grid-template-columns:repeat(2,1fr)} .gal__i--w{grid-column:span 2} } @media (max-width:760px){ body{font-size:16px} html{scroll-padding-top:66px} .nav__links{ position:fixed;inset:60px 0 auto 0; flex-direction:column;gap:0; background:rgba(5,5,6,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); padding:8px var(--gut) 22px; transform:translateY(-118%); transition:transform .34s var(--ease); margin-left:0; } .nav.is-open .nav__links{transform:none} .nav__links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px} .nav__in{gap:14px} .nav .btn--sm{margin-left:auto;font-size:12.5px;padding:9px 16px} .nav__ctaFull{display:none} .nav__toggle{ display:grid;place-content:center;gap:5px; width:38px;height:38px;padding:0; background:none;border:1px solid var(--line);border-radius:9px; cursor:pointer; } .nav__toggle span{ display:block;width:16px;height:1.5px;background:var(--ink); transition:transform .28s var(--ease),opacity .2s; } .nav.is-open .nav__toggle span:first-child{transform:translateY(3.25px) rotate(45deg)} .nav.is-open .nav__toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)} /* Phone hero: Manny is the subject, so he is CENTRED and large rather than pushed off-frame right. The copy moves to the bottom over a scrim instead of competing with him for the middle of the screen. */ .hero__pin{padding:88px 0 0;align-items:flex-end} html.scrub .hero{height:280svh} .hero__figure{ left:50%;right:auto;bottom:0; /* aspect-ratio, not width:auto — the desktop max-width:74vw was still applying here and squeezing the box to a 0.275 aspect against the image's true 0.587, so he rendered narrow. */ height:min(880px,90svh); aspect-ratio:1400/2385; width:auto;max-width:none; transform:translate3d(calc(-50% + var(--sx,0px) + var(--px)),calc(var(--sy,0px) + var(--py)),0) scale(var(--ss,1)); transform-origin:50% 76%; } .hero__figure img{width:100%;height:100%;max-width:none} .hero__figure img{opacity:var(--fo,0)} /* centred already, so no horizontal drift — the JS multiplies --sx by a centre-offset that is ~0 here anyway */ html.scrub .hero__figure{--sx:0px;--ss:1;--fo:1} .hero__punch{ left:50%;right:auto;bottom:0;top:auto; height:min(780px,84svh);width:auto; transform:translateX(-50%); } /* reel: full-width and centred on a phone */ .hero__reel{left:50%;top:42%;width:94vw} .hero__word{font-size:clamp(66px,19vw,124px);top:56%} .hero__stagetag{left:6%;font-size:clamp(30px,9vw,44px);max-width:8ch} /* copy sits at the bottom, over its own scrim */ .hero__content{padding-bottom:26px} .hero__content > *{max-width:100%} .hero__mark{font-size:clamp(50px,14.5vw,88px)} .hero__sub{letter-spacing:.16em;font-size:11px;margin-top:9px} .hero__h1{margin-bottom:12px} .pill{margin-bottom:16px} .hero__tag{max-width:22ch;margin-bottom:16px;font-size:16px} .hero__cta{gap:9px} .hero__meta{margin-top:16px;font-size:12px;line-height:1.7} .hero__cta .btn{flex:1 1 auto} /* the figure fills the frame now, so the copy needs a real floor to read on */ .hero__vig{ background: linear-gradient(180deg,rgba(5,5,6,.82) 0%,transparent 16%,transparent 46%, rgba(5,5,6,.62) 66%,rgba(5,5,6,.93) 84%,var(--bg) 100%); } .hero__scrim{ background:linear-gradient(180deg,transparent 40%,rgba(5,5,6,.55) 68%,rgba(5,5,6,.88) 100%); } .stats{gap:26px 40px} .credits span{min-width:100%} .credits li{gap:2px} .gal{grid-template-columns:1fr;padding-inline:var(--gut)} .rec__row{grid-template-columns:58px 1fr;gap:6px 16px;padding:16px 0} .rec__opp{grid-column:2} .rec__track{grid-column:1 / -1;grid-row:auto;margin-top:8px} .rec__yr{font-size:17px} .honors{margin-top:40px;grid-template-columns:1fr} .ring{opacity:.26;width:min(560px,150%)} .gwr{margin-top:40px} .gwr__list{gap:26px} .gal__i--w{grid-column:span 1} } @media (max-width:420px){ .hero__mark{font-size:clamp(60px,19vw,96px)} .plat a{padding:22px} } /* ========================================================= MOTION / DATA PREFERENCES ========================================================= */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{opacity:1;transform:none} .hero__scroll span{opacity:1} } /* Layers are decorative — if blend modes are unsupported, keep them dark rather than showing hard black boxes over the page. */ /* No @supports fallback needed: these layers carry real alpha now. */