/* ============================================================ LAY Z GORDON — Two Worlds Shared stylesheet (Music world + Basketball world) ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Bungee&family=Space+Grotesk:wght@400;500;700&display=swap'); /* ---------- Theme tokens ---------- */ :root{ /* Music world (default) */ --bg:#0a0118; --bg-2:#14052b; --ink:#f4ecff; --magenta:#2b5cff; /* was pink — now deep blue (site accent) */ --cyan:#19f0ff; --violet:#4f63ff; --lime:#c9ff2e; --gold:#ffc402; --accent:var(--magenta); --accent-2:var(--cyan); --font-display:'Anton', Impact, sans-serif; --font-fun:'Bungee', cursive; --font-body:'Space Grotesk', system-ui, sans-serif; --ease-out:cubic-bezier(.16,1,.3,1); --maxw:1280px; } /* Basketball world palette (applied on ) */ body.world-court{ --bg:#120a04; --bg-2:#26120a; --ink:#fff3e6; --accent:#ff6a13; /* hardwood orange */ --accent-2:#19f0ff; /* neon court line */ --magenta:#ff2e9a; --gold:#ffb302; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{height:100%} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); overflow-x:hidden; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} section{position:relative} ::selection{background:var(--accent);color:#000} /* hide default cursor on devices with a real pointer */ @media (hover:hover) and (pointer:fine){ body{cursor:none} a,button,.magnetic{cursor:none} } /* ---------- Reusable ---------- */ .wrap{width:min(92%,var(--maxw));margin-inline:auto} .eyebrow{ font-family:var(--font-fun); font-size:clamp(.7rem,1.4vw,.95rem); letter-spacing:.25em; text-transform:uppercase; color:var(--accent-2); display:inline-block; } .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ============================================================ Custom cursor ============================================================ */ .cursor-dot,.cursor-ring{ position:fixed;top:0;left:0;border-radius:50%; pointer-events:none;z-index:9999;mix-blend-mode:difference; translate:-50% -50%; } .cursor-dot{width:8px;height:8px;background:#fff} .cursor-ring{ width:42px;height:42px;border:2px solid #fff; transition:width .25s var(--ease-out),height .25s var(--ease-out),background .25s; } .cursor-ring.is-hover{width:70px;height:70px;background:rgba(255,255,255,.15)} @media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}} /* ============================================================ Preloader ============================================================ */ #preloader{ position:fixed;inset:0;z-index:10000; background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem; } #preloader .pl-name{ font-family:var(--font-display); font-size:clamp(2.5rem,12vw,9rem); line-height:.9;letter-spacing:.02em; background:linear-gradient(90deg,var(--magenta),var(--cyan),var(--lime),var(--gold)); background-size:300% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:hueflow 3s linear infinite; } /* equalizer-style loading bar */ .pl-eq{display:flex;gap:6px;height:46px;align-items:flex-end} .pl-eq span{ width:8px;background:var(--accent);border-radius:4px; animation:eq 1s ease-in-out infinite; } .pl-eq span:nth-child(2){animation-delay:.15s;background:var(--cyan)} .pl-eq span:nth-child(3){animation-delay:.3s;background:var(--lime)} .pl-eq span:nth-child(4){animation-delay:.45s;background:var(--gold)} .pl-eq span:nth-child(5){animation-delay:.6s;background:var(--magenta)} .pl-eq span:nth-child(6){animation-delay:.75s;background:var(--cyan)} .pl-eq span:nth-child(7){animation-delay:.9s;background:var(--lime)} @keyframes eq{0%,100%{height:10px}50%{height:46px}} /* ============================================================ Animated background (blobs behind the canvas) ============================================================ */ .bg-stage{position:fixed;inset:0;z-index:-2;overflow:hidden;background: radial-gradient(120% 120% at 10% 0%,var(--bg-2),var(--bg) 55%)} .blob{ position:absolute;border-radius:50%;filter:blur(100px);opacity:.28; mix-blend-mode:screen;animation:floaty 22s ease-in-out infinite; } .blob.b1{width:46vw;height:46vw;background:var(--magenta);top:-10%;left:-5%} .blob.b2{width:40vw;height:40vw;background:var(--cyan);bottom:-15%;right:-8%;animation-delay:-6s} .blob.b3{width:34vw;height:34vw;background:var(--violet);top:30%;left:55%;animation-delay:-11s} body.world-court .blob.b1{background:var(--accent)} body.world-court .blob.b3{background:var(--gold)} #fx{position:fixed;inset:0;z-index:-1;pointer-events:none} @keyframes floaty{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(6vw,-4vh) scale(1.15)} 66%{transform:translate(-5vw,5vh) scale(.9)} } @keyframes hueflow{to{background-position:300% 0}} @keyframes floaty-rotate{to{transform:rotate(360deg)}} /* film grain overlay */ .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ============================================================ Navigation ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:900; display:flex;align-items:center;justify-content:space-between; padding:1.1rem clamp(1rem,4vw,3rem); mix-blend-mode:difference; } .nav .logo{font-family:var(--font-fun);font-size:1.1rem;letter-spacing:.05em} .nav .logo b{color:inherit;font-size:1.3em;line-height:1} /* brand Z: same colour as the rest of the name (just slightly larger) */ .zmark{color:inherit;font-size:1.12em} .nav-links{display:flex;gap:1.6rem;font-weight:500;font-size:.9rem} .nav-links a{position:relative;opacity:.85;transition:opacity .2s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px; background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)} .nav-links a:hover{opacity:1} .nav-links a:hover::after{transform:scaleX(1)} @media(max-width:760px){.nav-links{display:none}} /* hamburger button */ .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px; padding:7px;background:none;border:none;cursor:pointer;position:relative;z-index:951} .hamburger span{display:block;height:3px;width:100%;background:var(--ink);border-radius:3px; transition:transform .3s var(--ease-out),opacity .2s} .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* full-screen world menu */ .menu-overlay{position:fixed;inset:0;z-index:940;display:grid;grid-template-columns:1fr 1fr; opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility .45s} .menu-overlay.open{opacity:1;visibility:visible} @media(max-width:760px){.menu-overlay{grid-template-columns:1fr;grid-template-rows:1fr 1fr}} .menu-world{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.7rem; padding:clamp(2rem,6vw,5rem);overflow:hidden;color:#fff;cursor:pointer; opacity:0;transform:translateY(40px); transition:opacity .5s var(--ease-out) .12s,transform .5s var(--ease-out) .12s} .menu-overlay.open .menu-world{opacity:1;transform:none} .menu-overlay.open .menu-world.court{transition-delay:.22s} .menu-world.music{background:linear-gradient(160deg,#1a0838,#0a0118)} .menu-world.court{background:linear-gradient(160deg,#2a130a,#120a04)} .menu-world::after{content:"";position:absolute;left:50%;bottom:-35%;width:85%;height:85%;translate:-50% 0; border-radius:50%;filter:blur(80px);opacity:.32;transition:opacity .4s,transform .4s;z-index:0} .menu-world.music::after{background:var(--cyan)} .menu-world.court::after{background:#ff6a13} .menu-world:hover::after{opacity:.6;transform:translate(-50%,-12%)} .menu-world > *{position:relative;z-index:1} .mw-eyebrow{font-family:var(--font-fun);letter-spacing:.22em;font-size:.78rem;text-transform:uppercase} .menu-world.music .mw-eyebrow{color:var(--cyan)} .menu-world.court .mw-eyebrow{color:#ff8a3d} .mw-title{font-family:var(--font-display);text-transform:uppercase;line-height:.82;font-size:clamp(2.4rem,7vw,6rem); color:#fff;text-decoration:none;display:inline-block;transition:opacity .2s} .mw-title:hover{opacity:.85} .mw-links{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin-top:1.2rem} .mw-links a{font-family:var(--font-fun);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; color:#fff;opacity:.72;text-decoration:none;position:relative;transition:opacity .2s} .mw-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:currentColor; transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)} .mw-links a:hover{opacity:1} .mw-links a:hover::after{transform:scaleX(1)} .mw-sub{opacity:.72;font-size:.95rem;max-width:30ch} .menu-close{position:fixed;top:.9rem;right:clamp(1rem,4vw,3rem);z-index:951;font-size:1.9rem;line-height:1; background:none;border:none;color:#fff;cursor:pointer;font-family:var(--font-fun)} /* ============================================================ Buttons ============================================================ */ .btn{ --b:var(--accent); display:inline-flex;align-items:center;gap:.6rem; font-family:var(--font-fun);font-size:1rem;letter-spacing:.04em; padding:1rem 1.8rem;border-radius:100px;color:#fff; background:var(--b);position:relative;overflow:hidden; box-shadow:0 0 0 0 var(--b);transition:box-shadow .35s,transform .2s; } .btn:hover{box-shadow:0 0 38px -4px var(--b);transform:translateY(-2px)} .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--b)} .btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--b),0 0 30px -6px var(--b)} /* ============================================================ Hero ============================================================ */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:7rem clamp(1rem,4vw,3rem) 4rem;position:relative;isolation:isolate} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2; filter:brightness(.85) saturate(1.05)} .hero-scrim{position:absolute;inset:0;z-index:-1;background: linear-gradient(90deg,rgba(6,1,16,.6),rgba(6,1,16,.28) 52%,rgba(6,1,16,.5)), linear-gradient(0deg,var(--bg),transparent 42%)} .hero .kicker{font-family:var(--font-fun);letter-spacing:.3em;font-size:clamp(.7rem,1.5vw,1rem); color:#fff;text-transform:uppercase;margin-bottom:1rem} .hero h1{ font-family:var(--font-display); font-size:clamp(3.4rem,17vw,15rem); line-height:.82;letter-spacing:-.01em;text-transform:uppercase; } .hero h1 .line{display:block;overflow:hidden} .hero h1 .stroke{ -webkit-text-stroke:2px var(--ink);color:transparent; } .hero h1 .fill{ background:linear-gradient(100deg,#f4ecff 6%,var(--cyan) 55%,var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* music-page hero: solid white title, smaller, anchored to the bottom */ body:not(.world-court) .hero{justify-content:flex-end;padding-bottom:clamp(3rem,7vh,6rem)} body:not(.world-court) .hero h1{font-size:clamp(2.2rem,8vw,5.5rem)} body:not(.world-court) .hero h1 .fill{ background:none;color:#fff;-webkit-text-fill-color:#fff; text-shadow:0 6px 26px rgba(0,0,0,.55); } body.world-court .hero h1 .fill{ background:linear-gradient(92deg,var(--accent),var(--gold) 60%,#fff); -webkit-background-clip:text;background-clip:text; } .hero .roles{margin-top:1.6rem;font-size:clamp(1rem,2.4vw,1.5rem);font-weight:500; display:flex;gap:.6rem 1.2rem;flex-wrap:wrap;opacity:.9} .hero .roles span{position:relative;padding-left:1.2rem} .hero .roles span::before{content:"♪";position:absolute;left:0;color:var(--accent)} body.world-court .hero .roles span::before{content:"●";color:var(--accent)} /* live equalizer in hero */ .equalizer{display:flex;gap:5px;height:60px;align-items:flex-end;margin-top:2rem} .equalizer i{width:7px;border-radius:4px;background:var(--accent);animation:eq 1.1s ease-in-out infinite} .equalizer i:nth-child(odd){background:var(--cyan)} .equalizer i:nth-child(3n){background:var(--lime);animation-duration:.8s} .equalizer i:nth-child(4n){background:var(--gold);animation-duration:1.4s} .equalizer i:nth-child(n){animation-delay:calc(var(--i,0) * .07s)} /* hero sound toggle button */ .hero-sound{align-self:flex-start;margin-top:1.8rem;font-size:.9rem;cursor:pointer} /* scroll cue */ .scroll-cue{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0; font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7; display:flex;flex-direction:column;align-items:center;gap:.5rem} .scroll-cue .mouse{width:24px;height:38px;border:2px solid currentColor;border-radius:14px;position:relative} .scroll-cue .mouse::after{content:"";position:absolute;top:6px;left:50%;translate:-50% 0;width:4px;height:8px; background:currentColor;border-radius:2px;animation:wheel 1.4s infinite} @keyframes wheel{0%{opacity:1;top:6px}70%{opacity:0;top:18px}100%{opacity:0}} /* ============================================================ Marquee ============================================================ */ .marquee{overflow:hidden;white-space:nowrap;border-block:2px solid color-mix(in srgb,var(--ink) 18%,transparent); padding:1rem 0;background:var(--accent);color:#0a0118} .marquee.alt{background:transparent;color:var(--ink)} .marquee .track{display:inline-block;animation:scrollx 22s linear infinite;font-family:var(--font-display); font-size:clamp(1.6rem,5vw,3.4rem);text-transform:uppercase;letter-spacing:.02em} .marquee .track span{margin:0 1.3rem} .marquee .track span .dot{color:var(--bg)} .marquee.alt .track span .dot{color:var(--accent)} .marquee:hover .track{animation-play-state:paused} @keyframes scrollx{to{transform:translateX(-50%)}} /* ============================================================ Photo framing (reusable) ============================================================ */ .photo{position:relative;border-radius:22px;overflow:hidden;background:#0c0613; box-shadow:0 30px 70px -22px rgba(0,0,0,.75),0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)} .photo img{width:100%;height:100%;object-fit:cover;display:block} .photo.glow{box-shadow:0 30px 90px -18px var(--accent),0 0 0 2px var(--accent)} .photo.duotone img{filter:grayscale(1) contrast(1.06)} .photo .ph-tag{position:absolute;left:0;bottom:0;z-index:2;font-family:var(--font-fun); font-size:.68rem;letter-spacing:.12em;background:var(--accent);color:#fff; padding:.4rem .85rem;border-radius:0 12px 0 0} .photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(160deg,transparent 55%,color-mix(in srgb,var(--accent) 30%,transparent))} /* graceful fallback if the image file isn't there yet */ .photo.is-missing{display:grid;place-items:center;min-height:340px;aspect-ratio:3/4} .photo.is-missing img{display:none} .photo.is-missing::after{content:"LAY Z";font-family:var(--font-display); font-size:clamp(2rem,6vw,3.4rem);color:color-mix(in srgb,var(--ink) 28%,transparent);letter-spacing:.05em} /* ============================================================ Manifesto — the welcome statement (first content block) ============================================================ */ .manifesto{padding:clamp(4rem,11vw,8rem) 0;position:relative;overflow:hidden} .manifesto .spot{position:absolute;top:-25%;left:60%;translate:-50% 0;width:80vmin;height:80vmin;z-index:-1; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 38%,transparent),transparent 62%); filter:blur(20px);opacity:.55;pointer-events:none;animation:spotpulse 6s ease-in-out infinite} @keyframes spotpulse{50%{opacity:.85;transform:translateX(-50%) scale(1.08)}} .mf-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.6rem,4vw,4rem);align-items:center} @media(max-width:900px){.mf-grid{grid-template-columns:1fr;gap:2rem}} .mf-photo{align-self:start} .mf-photo img{height:auto} /* show full portrait, no cropping */ .mf-body{position:relative} .mf-mark{font-family:var(--font-display);font-size:clamp(4rem,12vw,9rem);line-height:.5; color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--accent) 65%,transparent); opacity:.6;display:block;margin-bottom:.2em} .mf-text{font-family:var(--font-body);font-weight:500; font-size:clamp(1.25rem,2.9vw,2.3rem);line-height:1.34} .mf-text .hl{position:relative;white-space:nowrap;z-index:1} .mf-text .hl::after{content:"";position:absolute;left:-3px;right:-3px;bottom:.05em;height:.46em;z-index:-1; border-radius:5px;background:var(--accent);opacity:.30;transform:scaleX(0);transform-origin:left; transition:transform .8s var(--ease-out)} .mf-text .hl.music::after{background:var(--cyan)} .mf-text .hl.ball::after{background:var(--gold)} .manifesto.lit .mf-text .hl::after{transform:scaleX(1)} .manifesto.lit .mf-text .hl.music::after{transition-delay:.15s} .manifesto.lit .mf-text .hl.ball::after{transition-delay:.3s} .mf-text .funjazz{font-family:var(--font-fun);white-space:nowrap;color:var(--accent)} .mf-sign{margin-top:1.8rem;font-family:var(--font-fun);letter-spacing:.1em; font-size:clamp(.9rem,2vw,1.2rem);color:var(--accent-2)} .mf-sign small{display:block;font-family:var(--font-body);letter-spacing:.04em; text-transform:none;color:var(--ink);opacity:.6;font-size:.78rem;margin-top:.3rem} /* ============================================================ Generic section + reveal ============================================================ */ .section{padding:clamp(4rem,11vw,9rem) 0} .section-head{max-width:760px;margin-bottom:3rem} .section-head h2{font-family:var(--font-display);text-transform:uppercase; font-size:clamp(2.2rem,7vw,5.5rem);line-height:.9;letter-spacing:-.01em} .section-head h2 em{font-style:normal;color:var(--accent)} .section-head p{margin-top:1.2rem;font-size:clamp(1rem,2vw,1.25rem);opacity:.85;max-width:60ch} .reveal{opacity:0;transform:translateY(40px)} .reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} /* split-word reveal handled by JS adding .word spans */ .split .word{display:inline-block;overflow:hidden;vertical-align:top} .split .word > span{display:inline-block;transform:translateY(110%)} /* ============================================================ About / quote ============================================================ */ .about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start} @media(max-width:860px){.about-grid{grid-template-columns:1fr}} .about-grid p.lead{font-size:clamp(1.2rem,2.6vw,1.9rem);font-weight:500;line-height:1.35} .about-grid p.lead b{color:var(--accent)} .collab{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem} .collab .chip{border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); padding:.45rem .9rem;border-radius:100px;font-size:.85rem} .bigquote{ border-left:4px solid var(--accent);padding:1.2rem 0 1.2rem 1.6rem; font-family:var(--font-body);font-style:italic; font-size:clamp(1.2rem,2.6vw,1.8rem);line-height:1.4; } .bigquote cite{display:block;margin-top:1rem;font-style:normal;font-family:var(--font-fun); font-size:.8rem;letter-spacing:.15em;color:var(--accent-2)} /* Jerusalem Post attribution: official logo if provided, else masthead wordmark */ .bigquote cite.jpost{display:inline-block;margin-top:1.1rem;font-style:normal} .jpost-img{height:42px;width:auto;display:block} .jpost-text{font-family:Georgia,'Times New Roman',serif;font-weight:700;text-transform:none;letter-spacing:.01em; font-size:clamp(1.1rem,2.8vw,1.55rem);color:#fff;padding-top:.6rem; border-top:2px solid rgba(255,255,255,.45);display:inline-block} /* ============================================================ Interactive piano ============================================================ */ .piano-wrap{display:flex;flex-direction:column;align-items:center;gap:1.4rem} .piano{position:relative;display:flex;height:min(34vw,230px); border-radius:8px;overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 6px #0c0c12,0 0 0 8px var(--accent); user-select:none;touch-action:manipulation} .key{position:relative} .key.white{width:clamp(34px,7vw,58px);background:linear-gradient(#fff,#e9e4f3); border-right:1px solid #c7bfd6} .key.white:active,.key.white.lit{background:linear-gradient(var(--cyan),#fff)} .key.black{width:clamp(20px,4.2vw,34px);height:62%;background:linear-gradient(#222,#000); margin-inline:calc(clamp(20px,4.2vw,34px) / -2);z-index:2;border-radius:0 0 5px 5px; box-shadow:0 6px 10px rgba(0,0,0,.6)} .key.black:active,.key.black.lit{background:linear-gradient(var(--magenta),#400)} .key .lbl{position:absolute;bottom:8px;left:50%;translate:-50% 0;font-size:.6rem;color:#7a6f8c;font-weight:700} .key.black .lbl{color:#cbb8e0;bottom:6px} .piano-hint{font-family:var(--font-fun);font-size:.8rem;letter-spacing:.15em;color:var(--accent-2);text-transform:uppercase} /* ============================================================ Embeds (Spotify / YouTube) ============================================================ */ .media-grid{display:grid;gap:1.5rem} .embed-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} @media(max-width:860px){.embed-row{grid-template-columns:1fr}} .embed-card{border-radius:18px;overflow:hidden;position:relative; box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 15%,transparent); background:#000;transition:transform .35s var(--ease-out),box-shadow .35s} .embed-card:hover{transform:translateY(-6px);box-shadow:0 0 50px -10px var(--accent),0 0 0 2px var(--accent)} .embed-card iframe{display:block;width:100%;border:0} .video iframe{aspect-ratio:16/9;height:auto} .video .cap{position:absolute;top:0;left:0;font-family:var(--font-fun);font-size:.7rem; letter-spacing:.1em;background:var(--accent);color:#fff;padding:.35rem .7rem;border-radius:0 0 10px 0;z-index:2} /* ============================================================ Socials ============================================================ */ .socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem} .social{display:flex;align-items:center;justify-content:space-between;gap:.8rem; padding:1.2rem 1.3rem;border-radius:16px;font-family:var(--font-fun);font-size:.95rem; background:color-mix(in srgb,var(--ink) 6%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent); transition:transform .3s var(--ease-out),background .3s,color .3s} .social .arr{transition:transform .3s var(--ease-out)} .social:hover{transform:translateY(-4px);background:var(--accent);color:#fff} .social:hover .arr{transform:translate(4px,-4px) rotate(0deg)} /* ============================================================ Portal (the gateway to the other world) ============================================================ */ .portal{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:1.6rem;padding:5rem 1rem;position:relative;overflow:hidden} .portal .ring{position:absolute;border-radius:50%;border:2px solid var(--accent); width:60vmin;height:60vmin;opacity:.25;animation:floaty-rotate 26s linear infinite} .portal .ring:nth-child(2){width:80vmin;height:80vmin;border-color:var(--cyan);animation-duration:40s;animation-direction:reverse} .portal .ring:nth-child(3){width:42vmin;height:42vmin;border-color:var(--gold)} .portal .small{font-family:var(--font-fun);letter-spacing:.25em;color:var(--accent-2);text-transform:uppercase} .portal h2{font-family:var(--font-display);text-transform:uppercase;line-height:.85; font-size:clamp(2.6rem,11vw,9rem);position:relative;z-index:2} .portal h2 .o{color:transparent;-webkit-text-stroke:2px var(--accent)} .portal p{max-width:46ch;opacity:.85;position:relative;z-index:2} .portal-btn{position:relative;z-index:2;font-size:1.15rem;padding:1.2rem 2.4rem} /* a basketball that hints the second world */ .bball{width:clamp(70px,11vw,130px);aspect-ratio:1;border-radius:50%;position:relative;z-index:2; background:radial-gradient(circle at 35% 30%,#ff9b54,var(--accent) 45%,#b8470c); box-shadow:0 16px 40px -8px rgba(0,0,0,.7),inset -10px -12px 24px rgba(0,0,0,.35); animation:dribble 1.4s ease-in-out infinite} .bball::before,.bball::after{content:"";position:absolute;inset:0;border-radius:50%} .bball::before{border:3px solid rgba(0,0,0,.55); clip-path:polygon(48% 0,52% 0,52% 100%,48% 100%)} .bball::after{border:3px solid rgba(0,0,0,.55);border-radius:50%; transform:scaleY(.55)} @keyframes dribble{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(26px) scale(1.06,.94)}50%{transform:translateY(30px) scale(1.1,.9)}} /* ============================================================ Footer ============================================================ */ .footer{padding:4rem clamp(1rem,4vw,3rem) 3rem;text-align:center; border-top:2px solid color-mix(in srgb,var(--ink) 14%,transparent)} .footer .big{font-family:var(--font-display);font-size:clamp(2rem,9vw,6rem);text-transform:uppercase;line-height:.9; -webkit-text-stroke:1.5px var(--ink);color:transparent} .footer .links{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;font-family:var(--font-fun);font-size:.8rem;letter-spacing:.1em} .footer .copy{margin-top:1.6rem;opacity:.6;font-size:.8rem} /* AP DESIGN credit */ .credit{display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;margin-top:1.8rem; text-decoration:none;padding:.9rem 1.6rem;border-radius:16px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent); transition:transform .3s var(--ease-out),box-shadow .3s} .credit:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--accent),0 0 34px -10px var(--accent)} .credit-by{font-family:var(--font-fun);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6} .credit-name{font-family:var(--font-display);font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:.03em;line-height:1; background:linear-gradient(90deg,var(--accent),var(--cyan) 55%,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent} .credit-phone{font-size:.78rem;opacity:.72;letter-spacing:.1em;display:flex;align-items:center;gap:.4rem} .credit-phone::before{content:"";width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 8px #25d366} /* ============================================================ World-transition overlay (used on both pages) ============================================================ */ #transition{position:fixed;inset:0;z-index:9500;pointer-events:none; display:flex;align-items:center;justify-content:center;visibility:hidden} #transition .keys{position:absolute;inset:0;display:flex} #transition .strip{flex:1 1 0;transform:scaleY(0);transform-origin:bottom; box-shadow:inset 0 0 26px rgba(0,0,0,.4)} #transition .court-ball{ width:14vmin;aspect-ratio:1;border-radius:50%;opacity:0;transform:scale(.2);z-index:2; background:radial-gradient(circle at 35% 30%,#ff9b54,#ff6a13 45%,#b8470c); box-shadow:inset -10px -12px 24px rgba(0,0,0,.4)} #transition .t-label{position:absolute;z-index:3;font-family:var(--font-display); text-transform:uppercase;font-size:clamp(2rem,9vw,7rem);color:#fff;opacity:0;letter-spacing:.02em} /* ============================================================ STORY PAGE — basketball world ============================================================ */ /* timeline */ .timeline{position:relative;margin-top:2rem;padding-left:0} .timeline::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:3px; background:linear-gradient(var(--accent),var(--gold),var(--cyan))} @media(min-width:780px){.timeline::before{left:50%;translate:-50% 0}} .tl-item{position:relative;padding:0 0 2.6rem 56px} @media(min-width:780px){ .tl-item{width:50%;padding:0 0 3rem 0} .tl-item:nth-child(odd){left:0;padding-right:48px;text-align:right} .tl-item:nth-child(even){left:50%;padding-left:48px} } .tl-item .dot{position:absolute;top:4px;width:18px;height:18px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 5px var(--bg),0 0 22px var(--accent)} .tl-item .dot{left:10px} @media(min-width:780px){ .tl-item:nth-child(odd) .dot{left:auto;right:-9px} .tl-item:nth-child(even) .dot{left:-9px} } .tl-year{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--accent);line-height:1} .tl-item h3{font-family:var(--font-fun);font-size:1rem;margin:.4rem 0 .5rem} .tl-item p{opacity:.85;font-size:.98rem;max-width:46ch} @media(min-width:780px){.tl-item:nth-child(odd) p{margin-left:auto}} /* stats counters */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem} .stat{padding:2rem 1.4rem;border-radius:20px;text-align:center; background:color-mix(in srgb,var(--ink) 5%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent)} .stat .num{font-family:var(--font-display);font-size:clamp(2.6rem,8vw,5rem);line-height:.9;color:var(--accent)} .stat .lbl{margin-top:.5rem;font-family:var(--font-fun);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85} /* court hero backdrop lines */ .court-lines{position:absolute;inset:0;z-index:-1;opacity:.18;pointer-events:none; background: radial-gradient(circle at 50% 0,transparent 18%,var(--accent-2) 18.4%,transparent 19%), linear-gradient(var(--accent-2),var(--accent-2)) 50% 0/3px 100% no-repeat; background-blend-mode:screen} /* article cards */ .articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem} .article{display:block;padding:1.8rem;border-radius:18px;position:relative;overflow:hidden; background:color-mix(in srgb,var(--ink) 5%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent); transition:transform .35s var(--ease-out),box-shadow .35s} .article:hover{transform:translateY(-6px);box-shadow:0 0 46px -10px var(--accent),inset 0 0 0 1px var(--accent)} .article .src{font-family:var(--font-fun);font-size:.7rem;letter-spacing:.12em;color:var(--accent-2);text-transform:uppercase} .article h3{font-family:var(--font-display);font-size:1.5rem;line-height:1;margin:.7rem 0 .8rem;text-transform:uppercase} .article p{opacity:.85;font-size:.95rem} .article .read{margin-top:1rem;font-family:var(--font-fun);font-size:.78rem;letter-spacing:.1em;color:var(--accent)} /* ============================================================ Feature cards (the show / still in the game) ============================================================ */ .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem} .feature{padding:1.9rem;border-radius:18px;position:relative;overflow:hidden; background:color-mix(in srgb,var(--ink) 5%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent); transition:transform .35s var(--ease-out),box-shadow .35s} .feature:hover{transform:translateY(-6px);box-shadow:0 0 46px -10px var(--accent),inset 0 0 0 1px var(--accent)} .feature .n{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--accent);opacity:.55} .feature h3{font-family:var(--font-fun);font-size:1.05rem;margin:.45rem 0 .55rem} .feature p{opacity:.85;font-size:.95rem} .cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem} /* full-width landscape image band */ .band{position:relative;border-radius:24px;overflow:hidden; box-shadow:0 30px 80px -24px rgba(0,0,0,.7),0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)} .band img{width:100%;display:block;max-height:82vh;object-fit:cover} .band figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.7rem 1.3rem; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;line-height:1; font-size:clamp(1.1rem,3.4vw,2.4rem); background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)} .band figcaption em{font-style:normal;color:var(--accent)} /* YouTube video background (Deni Avdija block) */ .has-ytbg{isolation:isolate;overflow:hidden} .yt-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .yt-bg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0; width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh} .yt-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background: linear-gradient(0deg,rgba(10,5,2,.9),rgba(10,5,2,.62) 50%,rgba(10,5,2,.82))} /* Video lightbox / modal */ .modal{position:fixed;inset:0;z-index:9600;display:none;place-items:center;padding:5vmin; background:rgba(4,1,10,.86);backdrop-filter:blur(7px)} .modal.open{display:grid} .vlb-box{position:relative;width:min(1100px,94vw);aspect-ratio:16/9; border-radius:16px;overflow:hidden;box-shadow:0 30px 90px -20px #000,0 0 0 2px var(--accent)} .vlb-frame,.vlb-frame iframe,.vlb-frame video{width:100%;height:100%;border:0;display:block;background:#000} .vlb-close{position:absolute;top:-3.2rem;right:0;font-family:var(--font-fun);font-size:.85rem; letter-spacing:.06em;color:#fff;background:var(--accent);border:none;border-radius:100px; padding:.55rem 1.1rem;cursor:pointer;z-index:2} /* section background video (fills the empty space of a block) */ .has-bgvid{isolation:isolate;overflow:hidden} .bgvid{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .bgvid video{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(1.05)} .bgvid-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background: linear-gradient(90deg,rgba(10,1,24,.95) 0%,rgba(10,1,24,.74) 40%,rgba(10,1,24,.34) 100%), linear-gradient(0deg,var(--bg),transparent 26%,transparent 74%,var(--bg))} /* reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} html{scroll-behavior:auto} }