/* ============================================================ KARL KANE — DJ & Producer · v3 "editorial / blueprint" CI: Orange #FF531D · Teal #5ED3BB · Dark Fonts: Clash Display (headlines) + Poppins (body) + system mono (labels) ============================================================ */ /* ---------- Fonts ---------- */ @font-face{font-family:'Clash Display';src:url('../fonts/clash-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/clash-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/clash-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Poppins';src:url('../fonts/poppins-800.woff2') format('woff2');font-weight:800;font-display:swap} /* ---------- Tokens ---------- */ :root{ --bg:#08080A; --bg-2:#0C0C0F; --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.06); --ink:#F6F4F0; --muted:#A6A6AD; --muted-2:#6C6C74; --orange:#FF531D; --orange-2:#FF7A2F; --orange-glow:rgba(255,83,29,.55); --teal:#5ED3BB; --teal-2:#86E8D6; --teal-glow:rgba(94,211,187,.5); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05); --line-3:rgba(255,255,255,.14); --grid-line:rgba(255,255,255,.12); --display:'Clash Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,'SF Mono','JetBrains Mono','Cascadia Code','Roboto Mono',Consolas,monospace; --maxw:1600px; --pad:clamp(1.15rem,4vw,4rem); --cols:6; --r:18px; --ease:cubic-bezier(.22,.61,.36,1); --eo:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* page background lives on (NOT body) so the fixed FX canvases (z-index:-2/-1), which are children of , paint ABOVE the page background but behind the content. If body carried an opaque background it would paint over the negative-z-index canvases and hide the particles + grid + streaks entirely. */ html{-webkit-text-size-adjust:100%;scroll-behavior:auto;background:radial-gradient(130% 90% at 50% -12%,#0e0e15 0%,var(--bg) 55%) fixed;background-color:var(--bg);overflow-x:hidden;overscroll-behavior-y:none} body{ font-family:var(--body);color:var(--ink);background:transparent; line-height:1.65;font-size:clamp(1rem,.95rem + .2vw,1.05rem);font-weight:400; overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px} ::selection{background:var(--orange);color:#08080A} /* ---------- monospace micro-label ---------- */ .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)} .mono--teal{color:var(--teal)} .mono--orange{color:var(--orange)} /* ============================================================ BACKGROUND LAYERS (back → front: particles → blueprint → content) ============================================================ */ /* soft, blurred, magnetic particle field — full page, BEHIND everything */ /* canvas is a replaced element — must set explicit width/height:100% or it renders at its intrinsic (attribute×DPR) size and overflows the viewport + throws off drawing coords */ .bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;filter:blur(1.4px)} /* neon streaks that glide down along the blueprint grid lines */ .gridfx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} /* mobile performance: drop the full-screen blur + the hero blend/blur canvas layers (JS also skips drawing them) */ @media (max-width:760px){.bgfx{filter:none}.hero__fx,.hero__wave{display:none}} /* blueprint column grid + crosshair markers */ .blueprint{position:fixed;inset:0;z-index:-1;pointer-events:none;display:flex;justify-content:center;opacity:.9;overflow:hidden} /* vertical grid lines are now drawn full-width on the #gridFx canvas (JS) so grid + streaks share one source and align perfectly. The blueprint element only keeps the two horizontal crosshair accents. */ .blueprint__inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:var(--pad)} .blueprint__inner::before,.blueprint__inner::after{content:"";position:absolute;left:-4px;right:-4px;height:1px;background:var(--grid-line)} .blueprint__inner::before{top:18vh}.blueprint__inner::after{bottom:14vh} @media (max-width:1024px){:root{--cols:4}} @media (max-width:600px){:root{--cols:2}.blueprint__inner{margin-inline:0}} /* film grain overlay (global, fixed, on top) */ .grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.04;mix-blend-mode:overlay;overflow:hidden} .grain::after{content:"";position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 7s steps(6) infinite} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,2%)}80%{transform:translate(4%,3%)}100%{transform:translate(0,0)}} /* bottom edge blur */ .edge-blur{position:fixed;left:0;right:0;bottom:0;height:18vh;z-index:2;pointer-events:none; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 35%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 35%,transparent 100%);} /* ---------- smooth scroll wrapper ---------- */ #smooth-wrapper{position:fixed;top:0;left:0;width:100%;will-change:transform;z-index:1} body.no-smooth #smooth-wrapper{position:relative;z-index:1} /* ---------- custom cursor ---------- */ .cur{position:fixed;top:0;left:0;z-index:120;pointer-events:none;border-radius:50%;translate:-50% -50%;will-change:transform} .cur-dot{width:7px;height:7px;background:var(--orange);box-shadow:0 0 14px var(--orange-glow),0 0 5px var(--orange)} .cur-ring{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.8);transition:width .3s var(--eo),height .3s var(--eo),background .3s,border-color .3s} body.cur-hover .cur-ring{width:60px;height:60px;border-color:var(--teal);background:rgba(94,211,187,.08)} body.cur-hover .cur-dot{background:var(--teal);box-shadow:0 0 14px var(--teal-glow),0 0 4px var(--teal)} @media (hover:none),(pointer:coarse){.cur{display:none}} /* hide the native cursor on precise pointers — ONLY once the custom ring/dot is live (html.has-cursor is set by JS; legal pages without the cursor script keep the native one) */ @media (hover:hover) and (pointer:fine){html.has-cursor *{cursor:none!important}html.has-cursor input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),html.has-cursor textarea,html.has-cursor [contenteditable]{cursor:text!important}} /* ============================================================ layout */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} section{position:relative;padding-block:clamp(4.5rem,9vw,8.5rem)} .sec-line{border-top:1px solid var(--line)} /* eyebrow → now monospace technical label */ .eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)} .eyebrow--o{color:var(--orange)} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.0;letter-spacing:-.02em;word-spacing:.14em} .h-sec{font-size:clamp(2.4rem,6.5vw,5.4rem);font-weight:600;margin-top:1.1rem;text-transform:uppercase;line-height:.95;word-spacing:.2em} .h-sec .ac{color:var(--orange);text-shadow:0 0 28px var(--orange-glow)} .h-sec .ac-t{color:var(--teal);text-shadow:0 0 28px var(--teal-glow)} .lead{color:var(--muted);max-width:52ch;margin-top:1.3rem;font-size:1.05rem;font-weight:400} /* ---------- ghost overflow headline ---------- */ .ghost{position:absolute;z-index:0;font-family:var(--display);font-weight:700;text-transform:uppercase; line-height:.74;letter-spacing:-.03em;white-space:nowrap;color:rgba(255,255,255,.035); font-size:clamp(5rem,20vw,18rem);pointer-events:none;user-select:none} .ghost--stroke{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06)} /* plus crosshair marker */ .plus{position:absolute;width:14px;height:14px;color:var(--muted-2);opacity:.6;pointer-events:none} .plus::before,.plus::after{content:"";position:absolute;background:currentColor} .plus::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)} .plus::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)} /* full-bleed bg media */ .bg-media{position:absolute;inset:0;z-index:0;overflow:hidden} .bg-media img,.bg-media video{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;filter:saturate(1.06) contrast(1.03);will-change:transform} .bg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.82),rgba(8,8,10,.64) 45%,rgba(8,8,10,.92))} .bg-tint-o::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 80% at 15% 20%,rgba(255,83,29,.22),transparent 60%);pointer-events:none} .bg-tint-t::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 80% at 85% 30%,rgba(94,211,187,.2),transparent 60%);pointer-events:none} section>.wrap{position:relative;z-index:2} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.7rem;border-radius:100px;font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:#0A0A0B;position:relative;overflow:hidden;isolation:isolate;transition:transform .4s var(--eo),box-shadow .4s var(--eo)} .btn svg{width:1.2em;height:1.2em} .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--eo)} .btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px -12px var(--orange-glow)} .btn:hover::after{transform:translateY(0)} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-3)} .btn--ghost::after{background:var(--ink)} .btn--ghost:hover{color:#0A0A0B} .btn--teal{background:var(--teal)} .btn--teal:hover{box-shadow:0 16px 44px -12px var(--teal-glow)} /* ============================================================ NAV */ .nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--pad);border-bottom:1px solid transparent;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s,backdrop-filter .4s var(--ease)} .nav.scrolled{background:rgba(8,8,10,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2);padding-block:.65rem} .nav__logo img{height:32px;width:auto;transition:height .4s var(--ease);filter:drop-shadow(0 0 16px rgba(255,83,29,.35))} .nav.scrolled .nav__logo img{height:27px} .nav__links{display:flex;align-items:center;gap:clamp(1.1rem,1.7vw,2rem)} .nav__links a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);position:relative;transition:color .3s} .nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--orange);box-shadow:0 0 8px var(--orange-glow);transition:width .35s var(--eo)} .nav__links a:hover{color:var(--ink)} .nav__links a:hover::after{width:100%} /* Blog = distinct pill button */ .nav__blog{border:1px solid var(--line-3);border-radius:100px;padding:.42rem .95rem;color:var(--teal)!important} .nav__blog::after{display:none} .nav__blog:hover{border-color:var(--teal);background:rgba(94,211,187,.1);color:var(--teal-2)!important} .nav__right{display:flex;align-items:center;gap:1rem} .lang{display:inline-flex;border:1px solid var(--line-3);border-radius:100px;overflow:hidden} .lang button{padding:.4rem .7rem;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.05em;color:var(--muted-2);transition:.25s} .lang button.active{background:var(--ink);color:#0A0A0B} .nav__cta{padding:.6rem 1.15rem;font-size:.7rem} .burger{display:none;flex-direction:column;gap:5px;padding:.4rem;z-index:95} .burger span{width:26px;height:2px;background:var(--ink);transition:.3s var(--ease)} .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .burger span:nth-child(2){opacity:0} .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:940px){ /* full-screen, fully opaque overlay menu (clean, no content bleed-through) */ .nav__links{position:fixed;inset:0;width:100%;height:100dvh;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1.4rem,4vh,2.2rem); background:var(--bg);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); transform:translateX(100%);visibility:hidden;opacity:0;transition:transform .5s var(--eo),opacity .4s var(--eo),visibility .5s; padding:6rem 2rem 5rem;overflow-y:auto;overscroll-behavior:contain} .nav__links::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 60% at 50% 0,rgba(255,83,29,.10),transparent 60%),radial-gradient(120% 60% at 50% 100%,rgba(94,211,187,.08),transparent 60%)} .nav__links a{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,6.5vw,2rem);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)} .nav__links a::after{display:none} .nav__links a:active{color:var(--orange)} .nav__blog{font-family:var(--mono)!important;font-size:.95rem!important;letter-spacing:.16em;padding:.6rem 1.4rem;margin-top:.4rem} .nav.open .nav__links{transform:translateX(0);visibility:visible;opacity:1} .burger{display:flex}.nav__cta{display:none} /* keep the burger (turns into an ✕) tappable above the overlay */ .nav.open .burger{position:fixed;top:1.35rem;right:var(--pad);z-index:96} /* hide the floating dock, cookie bar, edge blur + lang while the menu is open so nothing floats over it */ body:has(.nav.open) .dock,body:has(.nav.open) .edge-blur,body:has(.nav.open) .cc{opacity:0;pointer-events:none;animation:none;transition:opacity .3s} .nav.open .lang{opacity:0;pointer-events:none} } /* ============================================================ HERO (triptych: lanyard · name · cutout) */ /* opaque backing so the heavy composited hero layer (mix-blend/filter/backdrop children) never flashes a blank white tile at its bottom edge during fast scroll */ .hero{position:relative;min-height:100svh;overflow:hidden;background:var(--bg)} .hero__video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0} .hero__poster{opacity:.28} .hero__video{opacity:0;transition:opacity 1.4s ease} .hero__video.ready{opacity:.28} .hero__veil{position:absolute;inset:0;z-index:1;background: radial-gradient(50% 56% at 50% 46%,rgba(8,8,10,.34),rgba(8,8,10,.64) 70%,rgba(8,8,10,.92)), linear-gradient(0deg,var(--bg) 4%,rgba(8,8,10,.3) 30%,transparent 60%), linear-gradient(180deg,rgba(8,8,10,.82),transparent 22%)} .hero__wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.45} .hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;filter:blur(1px);mix-blend-mode:screen} .hero__rays{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;mix-blend-mode:screen} .hero__rays i{position:absolute;top:-30%;width:42vw;height:160%;filter:blur(48px);opacity:.4;transform-origin:top center} .hero__rays i:nth-child(1){left:14%;background:linear-gradient(180deg,var(--orange),transparent 70%);rotate:14deg;animation:ray 9s ease-in-out infinite alternate} .hero__rays i:nth-child(2){right:18%;background:linear-gradient(180deg,var(--teal),transparent 70%);rotate:-10deg;opacity:.3;animation:ray 11s ease-in-out -3s infinite alternate} @keyframes ray{from{transform:translateX(-4%) scaleY(.95);opacity:.26}to{transform:translateX(6%) scaleY(1.05);opacity:.46}} /* cutout — anchored far RIGHT, face clearly visible, slightly cropped. Two stacked layers: a blurred "glow" backing softens the hard silhouette edges into the scene, a sharp "main" on top keeps the face crisp. */ .hero__cutout{position:absolute;right:clamp(-6rem,-4vw,-2rem);bottom:0;z-index:2;height:min(96%,1000px);width:auto;aspect-ratio:1120/920;will-change:transform} .hero__cutout img{position:absolute;inset:0;height:100%;width:100%;max-width:none;object-fit:contain;object-position:bottom right; -webkit-mask-image:linear-gradient(to top,transparent 0,#000 14%,#000 100%);mask-image:linear-gradient(to top,transparent 0,#000 14%,#000 100%)} .cutout-glow{z-index:1;filter:blur(11px) saturate(1.06) brightness(1.02);opacity:0;transform:scale(1.045);animation:cutGlow 1.9s .3s var(--eo) forwards} .cutout-main{z-index:2;filter:drop-shadow(0 36px 66px rgba(0,0,0,.5)) contrast(1.05) brightness(1.03);opacity:0;transform:translateY(26px) scale(1.05);animation:cutIn 1.6s .4s var(--eo) forwards} @keyframes cutIn{to{opacity:1;transform:none}} @keyframes cutGlow{to{opacity:.55;transform:scale(1.03)}} /* giant lanyard — hangs from the very top, beside the wordmark (brand mark), gently swings */ .hero__lanyard{position:absolute;left:clamp(2rem,15vw,16rem);top:-14px;z-index:3;width:clamp(190px,18vw,270px);height:86%;pointer-events:none;will-change:transform} .hl__pivot{position:absolute;top:0;left:50%;transform-origin:top center;will-change:transform;opacity:0} .hl__pivot.lit{opacity:1} .hl__strap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:clamp(22px,2vw,30px);height:clamp(190px,24vh,290px);background:linear-gradient(180deg,var(--orange),#9c310e);box-shadow:0 0 26px var(--orange-glow)} .hl__strap::after{content:"KARL KANE · ALL ACCESS";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--mono);font-size:.56rem;letter-spacing:.34em;color:rgba(10,10,11,.75);font-weight:600} .hl__clip{position:absolute;top:calc(clamp(190px,24vh,290px) - 8px);left:50%;transform:translateX(-50%);width:clamp(46px,4vw,60px);height:clamp(24px,2.4vw,30px);border:3px solid #9a9aa0;border-radius:7px;background:linear-gradient(180deg,#e8e8ec,#7c7c84)} .hl__card{position:absolute;top:calc(clamp(190px,24vh,290px) + 12px);left:50%;transform:translateX(-50%);width:clamp(190px,18vw,270px);aspect-ratio:5/6;border-radius:20px;background:linear-gradient(158deg,#22222c,#0b0b0e);border:1px solid var(--line-3);box-shadow:0 40px 90px -16px #000,inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2.2rem 1.4rem 1.6rem} .hl__hole{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:70px;height:12px;border-radius:7px;background:#000;box-shadow:inset 0 0 5px #000,0 1px 0 rgba(255,255,255,.07)} .hl__logo{width:clamp(70px,7vw,100px);height:auto;object-fit:contain;margin-top:.7rem;opacity:.97;filter:drop-shadow(0 0 16px rgba(255,255,255,.2))} .hl__name{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1.6vw,1.8rem);letter-spacing:.02em;text-transform:uppercase;line-height:1} .hl__role{font-family:var(--mono);font-size:clamp(.6rem,.7vw,.74rem);letter-spacing:.24em;color:var(--teal);text-transform:uppercase} .hl__bc{font-family:var(--mono);font-size:.56rem;letter-spacing:.36em;color:var(--muted-2);margin-top:.3rem} .hl__holo{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;pointer-events:none} .hl__holo::before{content:"";position:absolute;top:-60%;left:0;width:48%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),rgba(94,211,187,.2),rgba(255,83,29,.16),transparent);transform:translateX(-200%) rotate(16deg);animation:sweep 6s ease-in-out infinite} @keyframes sweep{0%{transform:translateX(-200%) rotate(16deg)}55%,100%{transform:translateX(420%) rotate(16deg)}} /* monumental display headline — CENTER, clearly visible, above the cutout */ .hero__display{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding-top:3rem;will-change:transform} .hero__iam{font-family:var(--mono);font-weight:500;font-size:clamp(1.1rem,3.2vw,2.4rem);letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;color:var(--orange);text-shadow:0 0 30px var(--orange-glow);margin-bottom:clamp(.3rem,1vw,.8rem);opacity:0;animation:fu .9s .3s var(--eo) forwards} .hero__name{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.78;letter-spacing:-.04em} .hero__name .ln{display:block;font-size:clamp(4rem,15vw,15rem); background:linear-gradient(176deg,#ffffff 0%,#e8e8ee 22%,#a6a6af 50%,#5c5c64 74%,#2a2a30 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 22px 50px rgba(0,0,0,.6)); opacity:0;transform:translateY(46px);animation:nameIn 1.15s var(--eo) forwards} .hero__name .ln:nth-child(1){animation-delay:.42s} .hero__name .ln:nth-child(2){animation-delay:.56s} @keyframes nameIn{to{opacity:1;transform:none}} @keyframes fu{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}} .hero__sub{margin-top:clamp(1rem,2vw,1.7rem);max-width:46ch;font-family:var(--mono);font-size:clamp(.78rem,1.15vw,1rem);line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:0;animation:fu 1s .55s var(--eo) forwards} .hero__sub b{color:var(--orange);font-weight:500} /* monospace identity, top-left */ .hero__id{position:absolute;left:var(--pad);top:clamp(5.6rem,11vw,8.5rem);z-index:5;display:flex;flex-direction:column;gap:.25rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);opacity:0;animation:fu 1s .9s var(--eo) forwards} .hero__id span:first-child{color:var(--teal)} /* CTAs, bottom-left */ .hero__cta{position:absolute;left:var(--pad);bottom:clamp(4.6rem,9vw,6.5rem);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem 1.5rem;opacity:0;animation:fu 1s .7s var(--eo) forwards} .hero__scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:5;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);opacity:0;animation:fu 1s .85s var(--eo) forwards,bob 2.4s 1.6s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}} .play{display:inline-flex;align-items:center;gap:1rem;color:var(--ink)} .play__disc{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--teal);color:#08080A;transition:transform .4s var(--eo)} .play__disc::before{content:"";position:absolute;inset:-9px;border:1px solid var(--teal);border-radius:50%;animation:pulse 2.6s infinite} @keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.4);opacity:0}100%{opacity:0}} .play:hover .play__disc{transform:scale(1.08)} .play__disc svg{width:19px;height:19px;margin-left:3px} .play b{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.1} .play small{display:block;color:var(--muted-2);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase} /* tablet: shrink the flanks so the name stays the hero */ @media (max-width:1100px){ .hero__lanyard{width:clamp(210px,30vw,300px);opacity:.92} .hero__cutout{right:clamp(-7rem,-8vw,-3rem)} } @media (max-width:820px){ /* lanyard hangs centered from the top */ .hero__lanyard{left:50%;margin-left:-72px;top:-6px;width:144px;height:auto;z-index:3;opacity:.97} .hl__strap{height:70px} .hl__strap::after{display:none} /* vertical strap text doesn't fit the short mobile strap */ .hl__clip{top:62px} .hl__card{top:80px;width:144px;padding:1.3rem 1rem 1rem} .hl__logo{width:42px;margin-top:.2rem} .hl__name{font-size:.98rem} .hl__role{font-size:.52rem} .hl__bc{font-size:.44rem;letter-spacing:.2em;white-space:nowrap} /* ★ ALL ACCESS ★ on one line */ .hl__hole{top:10px;width:42px;height:7px} /* clear gap under the lanyard; compact text block that stays ABOVE the cutout */ .hero__display{justify-content:flex-start;padding-top:clamp(268px,35vh,308px)} .hero__iam{letter-spacing:.5em;text-indent:.5em} .hero__name .ln{font-size:clamp(2.9rem,17vw,7rem)} .hero__sub{margin-top:1rem;font-size:.66rem;line-height:1.6;letter-spacing:.12em;max-width:30ch} .hero__sub br,.hero__sub b{display:none} /* drop the redundant "This is KARL KANE" line on mobile */ /* cutout lower & a touch smaller so the face never lands under the text */ .hero__cutout{height:min(40%,320px);right:-8%;z-index:2} .hero__veil{background:radial-gradient(95% 42% at 50% 33%,rgba(8,8,10,.3),rgba(8,8,10,.68) 66%,rgba(8,8,10,.96)),linear-gradient(0deg,var(--bg) 12%,transparent 58%)} .hero__cta{flex-direction:column;align-items:flex-start;gap:.85rem;bottom:clamp(2.4rem,7vw,4.4rem)} .hero__cta .play small{display:none} } @media (max-width:560px){ .hero__lanyard{margin-left:-66px;width:132px} .hl__card{width:132px} .hero__display{padding-top:clamp(248px,33vh,292px)} .hero__sub{max-width:26ch} .hero__cutout{height:min(38%,290px);right:-10%} } /* ============================================================ reveal */ .reveal{opacity:0;transform:translateY(36px);filter:blur(10px);transition:opacity 1s var(--eo),transform 1s var(--eo),filter 1s var(--eo)} .reveal.in{opacity:1;transform:none;filter:blur(0)} .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}.reveal[data-d="5"]{transition-delay:.4s} /* scroll-linked word fill (used sparingly) */ .filltext{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.12;letter-spacing:-.01em;word-spacing:.22em;font-size:clamp(1.7rem,4.6vw,3.4rem);max-width:18ch} .filltext .w{color:rgba(246,244,240,.13);transition:color .3s linear} .filltext .w.lit{color:var(--ink)} .filltext .w.lit-o{color:var(--orange);text-shadow:0 0 30px var(--orange-glow)} /* intro section (single scroll-revealed statement) */ .intro{padding-block:clamp(5.5rem,13vw,12rem);text-align:center;position:relative} .intro .filltext{margin-inline:auto;max-width:22ch;font-size:clamp(2rem,6.2vw,5.2rem);line-height:1.06} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1!important;transform:none!important;filter:none!important} .filltext .w{color:var(--ink)!important} .hero__name .ln,.hero__iam,.hero__sub,.hero__cta,.hero__cutout img,.hero__id,.hero__scroll,.hl__pivot{opacity:1!important;transform:none!important;filter:none!important} .cutout-glow{display:none!important} } /* ============================================================ TICKER (marquee) */ .ticker{position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(2.1rem,3.6vw,3.4rem);background:rgba(8,8,10,.4); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .ticker__track{display:flex;align-items:center;gap:clamp(2.6rem,4.5vw,4rem);width:max-content;animation:marquee 58s linear infinite} .ticker__track span{font-family:var(--mono);font-size:clamp(1.2rem,2.4vw,1.9rem);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .3s,text-shadow .3s,transform .3s var(--eo)} .ticker__track .st{color:var(--orange)} .ticker__track .st--t{color:var(--teal)} /* hover → keep moving; ONLY the hovered word lights up, strongly */ .ticker__track span:not(.st):not(.st--t):hover{color:#fff;text-shadow:0 0 30px rgba(255,255,255,.75),0 0 12px rgba(255,255,255,.5);transform:scale(1.12)} .ticker__track .st:hover{color:var(--orange-2);text-shadow:0 0 30px var(--orange-glow)} .ticker__track .st--t:hover{color:var(--teal-2);text-shadow:0 0 30px var(--teal-glow)} @keyframes marquee{to{transform:translateX(-50%)}} /* scroll-direction reverses every marquee (set on ) */ [data-scroll="up"] .ticker__track, [data-scroll="up"] .band__track, [data-scroll="up"] .gear__track{animation-direction:reverse} /* ============================================================ WORLD / GLOBE + city band */ .world{padding-block:clamp(4rem,8vw,7rem) 0;position:relative;overflow:hidden} .world__head{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center} .world__head .eyebrow{justify-content:center} .world__head .h-sec{text-transform:uppercase} .world__stage{position:relative;margin-top:clamp(2rem,5vw,4rem);height:clamp(360px,52vw,640px)} .globe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(125%,1120px);height:118%;pointer-events:none;opacity:.9} .world__band{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;overflow:hidden;padding-block:2.4rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .band__track{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.5rem);width:max-content;animation:marquee 74s linear infinite} /* skewed parallelogram city cards (the "cool" marquee look) */ .bcard{flex:none;display:flex;align-items:baseline;gap:.85rem;padding:1.2rem 2.5rem;border:1px solid var(--line-3);background:rgba(10,10,13,.66);backdrop-filter:blur(4px);transform:skewX(var(--sk,-11deg));transition:transform .65s var(--eo),border-color .35s,background .35s,box-shadow .35s} .bcard>*{transform:skewX(calc(-1 * var(--sk,-11deg)))} .bcard b{font-family:var(--mono);font-weight:500;font-size:clamp(.9rem,1.6vw,1.2rem);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:color .35s,text-shadow .35s} .bcard i{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;color:var(--muted-2)} .bcard--o{border-color:rgba(255,83,29,.45);background:rgba(255,83,29,.1)} .bcard--o b{color:var(--orange-2)}.bcard--o i{color:var(--orange)} /* hover → keep moving; ONLY the hovered card lights up, strongly */ .bcard:hover{border-color:rgba(94,211,187,.55);background:rgba(22,22,28,.85);box-shadow:0 0 42px rgba(94,211,187,.24);transform:skewX(var(--sk,-11deg)) scale(1.06)} .bcard:hover b{color:#fff;text-shadow:0 0 24px var(--teal-glow)} .bcard:hover i{color:var(--teal)} .bcard--o:hover{border-color:rgba(255,83,29,.7);background:rgba(255,83,29,.2);box-shadow:0 0 46px rgba(255,83,29,.32)} .bcard--o:hover b{color:var(--orange-2);text-shadow:0 0 26px var(--orange-glow)} [data-scroll="up"] .bcard{--sk:11deg} @media (max-width:600px){.world__stage{height:clamp(300px,82vw,460px)}.bcard{padding:.7rem 1.4rem}} /* ============================================================ VENUES */ .venues{padding-block:clamp(4rem,8vw,7rem)} .ven-head{position:relative;max-width:820px;margin-bottom:clamp(1.5rem,4vw,3rem)} .ven-list{position:relative;z-index:2;border-top:1px solid var(--line)} .ven{position:relative;display:grid;grid-template-columns:auto 1fr minmax(0,36ch) auto;grid-template-areas:"n name d a";align-items:center;gap:clamp(1rem,3vw,3rem);padding:clamp(1.4rem,3vw,2.5rem) clamp(.4rem,2vw,1.4rem);border-bottom:1px solid var(--line);transition:background .5s var(--ease)} .ven::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;background:linear-gradient(90deg,rgba(255,83,29,.14),transparent 80%);transition:width .6s var(--eo)} .ven:hover{background:rgba(255,255,255,.02)} .ven:hover::before{width:100%} .ven__n{grid-area:n;font-family:var(--mono);font-size:.8rem;color:var(--muted-2);letter-spacing:.12em} .ven__name{grid-area:name;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(2rem,5.5vw,4.2rem);line-height:.95;letter-spacing:-.02em;transition:color .4s,transform .55s var(--eo)} .ven:hover .ven__name{color:var(--orange);text-shadow:0 0 34px var(--orange-glow);transform:translateX(.6rem)} .ven:nth-child(even):hover .ven__name{color:var(--teal);text-shadow:0 0 34px var(--teal-glow)} .ven:nth-child(even)::before{background:linear-gradient(90deg,rgba(94,211,187,.14),transparent 80%)} .ven__d{grid-area:d;color:var(--muted);font-size:.92rem} .ven__a{grid-area:a;width:34px;height:34px;color:var(--muted-2);justify-self:end;transition:color .4s,transform .55s var(--eo)} .ven:hover .ven__a{color:var(--orange);transform:translateX(10px)} .ven:nth-child(even):hover .ven__a{color:var(--teal)} @media (max-width:880px){ .ven{grid-template-columns:auto 1fr auto;grid-template-areas:"n name a" "d d d";gap:.4rem 1.1rem;padding-block:1.5rem} .ven__d{font-size:.84rem;margin-top:.5rem} .ven__a{width:24px;height:24px;align-self:start;margin-top:.5rem} } /* ============================================================ ANGEBOT / SERVICES (numbered) */ .angebot .ang-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .ang-list{position:relative;z-index:2;display:grid;border-top:1px solid var(--line);margin-top:1.6rem} .ang-svc{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.6rem .4rem;border-bottom:1px solid var(--line)} .ang-svc .num{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--orange)} .ang-svc h3{font-size:clamp(1.4rem,2.6vw,2rem);text-transform:uppercase;margin-bottom:.4rem} .ang-svc p{color:var(--muted);font-size:.95rem;max-width:46ch} .ang-cards{display:grid;gap:1.1rem} .ang-card{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:2rem;background:rgba(255,255,255,.03);backdrop-filter:blur(6px);overflow:hidden;transition:transform .5s var(--eo),border-color .5s} .ang-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(120% 120% at 0 0,rgba(255,83,29,.16),transparent 55%)} .ang-card:hover{transform:translateY(-6px);border-color:rgba(255,83,29,.4)} .ang-card:hover::before{opacity:1} .ang-card img{width:50px;height:50px;object-fit:contain;margin-bottom:1.1rem} .ang-card svg{width:44px;height:44px;color:var(--teal);margin-bottom:1.1rem} .ang-card h3{font-size:1.45rem;text-transform:uppercase;margin-bottom:.5rem} .ang-card p{color:var(--muted);font-size:.96rem} @media (max-width:820px){.angebot .ang-grid{grid-template-columns:1fr}} /* Section 02 — icon tiles per point (replace the old media), sized to fit within the 4-point list */ .snd-tiles{align-self:center;display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.4vw,1.2rem)} .snd-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(1.2rem,2vw,2rem);min-height:clamp(150px,16vw,200px);padding:clamp(1.2rem,1.8vw,1.7rem);border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.03);backdrop-filter:blur(6px);overflow:hidden;transition:transform .5s var(--eo),border-color .4s,background .4s,box-shadow .4s} .snd-tile::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(120% 120% at 0 0,rgba(255,83,29,.18),transparent 55%)} .snd-tile:hover{transform:translateY(-6px);border-color:rgba(255,83,29,.45);background:rgba(255,255,255,.05);box-shadow:0 22px 44px -24px rgba(255,83,29,.55)} .snd-tile:hover::before{opacity:1} .snd-tile svg{width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px);color:var(--teal);position:relative} .snd-tile:nth-child(odd) svg{color:var(--orange)} .snd-tile span{position:relative;font-family:var(--mono);font-size:clamp(.74rem,1.1vw,.9rem);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} @media (max-width:820px){.snd-tiles{margin-top:.4rem}.snd-tile{min-height:clamp(112px,34vw,160px)}} /* ============================================================ ABOUT */ .about .ab-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .ab-media{position:relative;z-index:2;perspective:1400px} /* subtle mouse-tilt wrapper (JS sets rotateX/Y + --gx/--gy sheen) */ .ab-tilt{position:relative;transform-style:preserve-3d;will-change:transform} /* cinematic hover FLIP: front = portrait (face), back = live at the deck */ .ab-flip{position:relative;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.62,.03,.28,1);will-change:transform} .ab-media:hover .ab-flip{transform:rotateY(180deg)} .ab-face{position:relative;border-radius:var(--r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden} .ab-face img{display:block;width:100%;border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;filter:contrast(1.05)} .ab-face--front img{object-position:center 28%} .ab-face--back{position:absolute;inset:0;transform:rotateY(180deg)} .ab-face--back img{object-position:center 58%} .ab-face::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(150deg,transparent 45%,rgba(255,83,29,.26));mix-blend-mode:screen;pointer-events:none} .ab-face--back::after{background:linear-gradient(150deg,transparent 45%,rgba(94,211,187,.24))} .ab-face--front::before{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r);opacity:0;transition:opacity .4s;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(60% 55% at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.22),transparent 60%)} .ab-media.tilting .ab-face--front::before{opacity:1} /* flip hint chip */ .ab-fliphint{position:absolute;right:.9rem;top:.9rem;z-index:4;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(8,8,10,.6);border:1px solid var(--line-3);border-radius:100px;padding:.36rem .7rem;backdrop-filter:blur(8px);opacity:.85;transition:opacity .4s} .ab-media:hover .ab-fliphint{opacity:0} /* touch devices: no hover → keep the portrait, hide the hover hint */ @media (hover:none){.ab-fliphint{display:none}.ab-media .ab-flip{transform:none!important}} .ab-badge{position:absolute;left:-1.2rem;bottom:1.6rem;z-index:3;background:rgba(12,12,15,.85);border:1px solid var(--line-3);border-radius:14px;padding:1rem 1.2rem;display:flex;align-items:center;gap:.9rem;backdrop-filter:blur(10px)} .ab-badge .n{font-family:var(--display);font-size:2rem;color:var(--orange);line-height:1;text-shadow:0 0 18px var(--orange-glow)} .ab-badge .t{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);max-width:13ch} .ab-sub{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem} .ab-sub .c{border-top:2px solid var(--orange);padding-top:1rem} .ab-sub .c.t{border-color:var(--teal)} .ab-sub h4{font-size:1.15rem;text-transform:uppercase;margin-bottom:.4rem} .ab-sub p{color:var(--muted);font-size:.9rem} @media (max-width:840px){.about .ab-grid{grid-template-columns:1fr}.ab-media{max-width:460px}.ab-badge{left:0}} @media (max-width:460px){.ab-sub{grid-template-columns:1fr}} /* ============================================================ STATS */ .stats{text-align:left;overflow:hidden} .stat-stage{position:relative;z-index:2;margin-top:clamp(1.4rem,4vw,2.6rem)} .stat-wave{position:absolute;left:0;right:0;bottom:-6%;width:100%;height:clamp(150px,20vw,260px);z-index:0;opacity:.6;pointer-events:none} .stat-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)} .stat{position:relative;padding:clamp(1rem,2.2vw,2rem) clamp(.8rem,2vw,2.2rem)} .stat + .stat::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:linear-gradient(180deg,transparent,var(--line-3),transparent)} .stat .num{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.02em} .stat:nth-child(odd) .num{color:var(--orange);text-shadow:0 0 34px var(--orange-glow)} .stat:nth-child(even) .num{color:var(--teal);text-shadow:0 0 34px var(--teal-glow)} .stat .lbl{margin-top:.7rem;color:var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase} /* numbers fade + slide in from the left, staggered → left-to-right cascade */ .reveal-x{opacity:0;transform:translateX(-34px);filter:blur(8px);transition:opacity .9s var(--eo),transform .9s var(--eo),filter .9s var(--eo)} .reveal-x.in{opacity:1;transform:none;filter:blur(0)} .reveal-x[data-d="1"]{transition-delay:.14s}.reveal-x[data-d="2"]{transition-delay:.28s}.reveal-x[data-d="3"]{transition-delay:.42s} @media (max-width:760px){.stat-row{grid-template-columns:1fr 1fr;row-gap:1.4rem}.stat:nth-child(3)::before{display:none}.stat-wave{height:clamp(120px,32vw,200px)}} @media (prefers-reduced-motion:reduce){.reveal-x{opacity:1!important;transform:none!important;filter:none!important}} /* ============================================================ PROJECTS */ .proj .pr-card{position:relative;z-index:2;max-width:760px;border-left:2px solid var(--orange);padding:1.4rem 0 1.4rem 1.8rem;margin-top:1.6rem;background:linear-gradient(90deg,rgba(255,83,29,.08),transparent);border-radius:0 12px 12px 0} .proj .pr-card p{font-size:1.15rem;color:var(--ink);font-weight:500} .proj .pr-card span{display:block;font-family:var(--mono);color:var(--teal);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem} /* ============================================================ WHY */ .why .wy-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .why .wy-grid>div{position:relative;z-index:2} .why ul{display:grid;gap:1rem;margin-top:2rem} .why li{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid var(--line-2);font-weight:500} .why li svg{flex:none;width:24px;height:24px;color:var(--orange);margin-top:2px} .wy-video{position:relative;z-index:2;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;cursor:pointer;border:1px solid var(--line)} .wy-video img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--eo),filter .5s} .wy-video::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,10,.7),transparent 60%)} .wy-video:hover img{transform:scale(1.05);filter:saturate(1.15)} .wy-video .pl{position:absolute;inset:0;z-index:2;display:grid;place-items:center} .wy-video .pl span{width:72px;height:72px;border-radius:50%;background:var(--orange);display:grid;place-items:center;animation:pulse2 2.4s infinite} @keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(255,83,29,.45)}70%{box-shadow:0 0 0 26px transparent}100%{box-shadow:0 0 0 0 transparent}} .wy-video .pl svg{width:25px;height:25px;color:#08080A;margin-left:4px} .wy-video .cap{position:absolute;left:1.1rem;bottom:1rem;z-index:2;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase} @media (max-width:840px){.why .wy-grid{grid-template-columns:1fr}.wy-video{order:-1}} /* gear marquee */ .gear{position:relative;z-index:2;border-block:1px solid var(--line-2);padding-block:2.6rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .gear__track{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);width:max-content;animation:marquee 30s linear infinite} .gcard{flex:none;display:grid;place-items:center;min-width:clamp(150px,18vw,230px);padding:1.4rem 2.4rem;border:1px solid var(--line);background:rgba(255,255,255,.035);transform:skewX(var(--sk,-11deg));transition:transform .65s var(--eo),border-color .35s,background .35s,box-shadow .35s} .gcard img{height:28px;width:auto;opacity:.5;filter:brightness(0) invert(1);transform:skewX(calc(-1 * var(--sk,-11deg)));transition:opacity .35s,transform .65s var(--eo)} /* hover → keep moving; ONLY the hovered card lights up */ .gcard:hover{border-color:rgba(94,211,187,.5);background:rgba(255,255,255,.07);box-shadow:0 0 34px rgba(94,211,187,.18);transform:skewX(var(--sk,-11deg)) scale(1.05)} .gcard:hover img{opacity:1} [data-scroll="up"] .gcard{--sk:11deg} /* ============================================================ MUSIC / DISCOGRAFIE */ .music__top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;position:relative;z-index:2} .music__main{position:relative;z-index:2;display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)} /* editorial table */ .etable{width:100%;border-top:1px solid var(--line)} .etable__head{display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:1.2rem;padding:.7rem .4rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .etable__row{position:relative;display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:1.2rem;align-items:center;padding:1rem .4rem;border-bottom:1px solid var(--line);transition:background .4s,padding-left .4s var(--eo)} .etable__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;background:linear-gradient(90deg,rgba(255,83,29,.12),transparent 70%);transition:width .5s var(--eo)} .etable__row:hover{padding-left:1rem} .etable__row:hover::before{width:100%} .etable__row .no{font-family:var(--mono);font-size:.74rem;color:var(--muted-2)} .etable__row .tt{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:-.01em} .etable__row:hover .tt{color:var(--orange)} .etable__row .ty{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-3);border-radius:100px;padding:.34rem .7rem;transition:.3s} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal-glow)} .etable__row:hover .pill{border-color:var(--teal);background:rgba(94,211,187,.08)} @media (max-width:560px){ .etable__head{grid-template-columns:1.6rem 1fr auto} .etable__head .h-ty{display:none} .etable__row{grid-template-columns:1.6rem 1fr auto;gap:.8rem} .etable__row .ty{display:none} } /* discography aside: rotating vinyl */ .disc-aside{position:relative;display:flex;flex-direction:column;gap:1.4rem;align-items:center;text-align:center} .vinyl{position:relative;width:min(78%,300px);aspect-ratio:1;border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.045) 0 1px,transparent 1px 4px), radial-gradient(circle at 50% 50%,#1a1a1f 0 30%,#0c0c0e 30% 100%); box-shadow:0 30px 70px -20px #000,inset 0 0 40px rgba(0,0,0,.8);animation:spin 9s linear infinite} .vinyl:hover{animation-duration:3.5s} .vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 80%,rgba(255,255,255,.07) 90%,transparent 100%)} .vinyl__label{position:absolute;inset:32%;border-radius:50%;overflow:hidden;border:1px solid rgba(0,0,0,.5);box-shadow:0 0 0 4px #0c0c0e} .vinyl__label img{width:100%;height:100%;object-fit:cover} .vinyl__hole{position:absolute;inset:48.5%;border-radius:50%;background:#08080A;box-shadow:inset 0 0 4px #000;z-index:2} @keyframes spin{to{transform:rotate(360deg)}} .disc-aside .btn{width:100%} @media (max-width:820px){.music__main{grid-template-columns:1fr}.disc-aside{order:-1;flex-direction:row;justify-content:center;flex-wrap:wrap}.vinyl{width:200px}} /* spotify facade */ .sp-facade{margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:2;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:linear-gradient(120deg,rgba(30,215,96,.12),rgba(255,255,255,.03));min-height:140px;display:flex;align-items:center;gap:1.4rem;padding:1.5rem;cursor:pointer} .sp-facade .ico{width:50px;height:50px;flex:none;color:#1ED760} .sp-facade b{font-family:var(--display);font-weight:500;font-size:1.25rem;display:block} .sp-facade p{color:var(--muted);font-size:.88rem;margin-top:.2rem} .sp-facade .go{margin-left:auto;align-self:center} .sp-embed{margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:2} .sp-embed iframe{width:100%;border:0;border-radius:var(--r);display:block;box-shadow:0 24px 60px -30px #000} @media (max-width:600px){.sp-facade{flex-wrap:wrap}.sp-facade .go{margin-left:0;width:100%}} /* ============================================================ BOOKING (climax) */ .booking{overflow:hidden} .booking .bk-card{position:relative;z-index:2;border-radius:clamp(20px,3vw,34px);overflow:hidden;background:linear-gradient(135deg,#1c1109,#0a0a0c 60%);border:1px solid rgba(255,83,29,.3);padding:clamp(2.5rem,6vw,5.5rem)} .bk-card::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 100% 0,rgba(255,83,29,.32),transparent 60%),radial-gradient(60% 100% at 0 100%,rgba(94,211,187,.18),transparent 60%);pointer-events:none} .bk-ghost{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);z-index:0;font-family:var(--display);font-weight:700;font-size:clamp(5rem,22vw,20rem);line-height:.7;letter-spacing:-.03em;white-space:nowrap; background:linear-gradient(180deg,rgba(255,83,29,.22),rgba(255,83,29,0));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none} .bk-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} .booking h2{text-transform:uppercase} .bk-quote{color:var(--muted);font-size:1.15rem;margin-top:1.2rem;max-width:42ch;font-style:italic} .bk-actions{display:flex;flex-direction:column;gap:1rem} .bk-actions .btn{width:100%;padding-block:1.1rem;font-size:.82rem} .bk-contact{margin-top:1.3rem;display:grid;gap:.4rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--muted)} .bk-contact a:hover{color:var(--orange)} @media (max-width:820px){.bk-grid{grid-template-columns:1fr}} /* ============================================================ FAQ (scrollable accordion) */ .faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .faq-intro{position:relative;z-index:2} .faq-cta{margin-top:clamp(1.6rem,3vw,2.4rem);padding:1.5rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.03)} .faq-cta b{display:block;font-family:var(--display);font-weight:600;font-size:1.15rem;text-transform:uppercase} .faq-cta p{color:var(--muted);font-size:.92rem;margin:.5rem 0 1.2rem} .faq-scroll{position:relative;z-index:2;max-height:clamp(430px,62vh,660px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r);background:rgba(10,10,13,.5);padding:.2rem clamp(.6rem,1.4vw,1.2rem) .6rem; scrollbar-width:thin;scrollbar-color:var(--orange) transparent} .faq-scroll::-webkit-scrollbar{width:8px} .faq-scroll::-webkit-scrollbar-track{background:transparent} .faq-scroll::-webkit-scrollbar-thumb{background:linear-gradient(var(--orange),#9c310e);border-radius:100px;border:2px solid rgba(10,10,13,.5)} .faq-cat{position:sticky;top:0;z-index:3;margin:0;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);padding:1.1rem .5rem .6rem;background:linear-gradient(180deg,rgba(10,10,13,.97) 60%,transparent);backdrop-filter:blur(4px)} .faq-cat:first-child{padding-top:.7rem} .faq-item{border-top:1px solid var(--line-2)} .faq-cat + .faq-item{border-top:0} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;padding:1.05rem .5rem;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.25;color:var(--ink);transition:color .3s} .faq-q:hover{color:var(--orange)} .faq-item.open .faq-q{color:var(--orange)} .faq-ic{position:relative;flex:none;width:16px;height:16px;color:var(--orange)} .faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transition:transform .4s var(--eo)} .faq-ic::before{width:14px;height:2px;transform:translate(-50%,-50%)} .faq-ic::after{width:2px;height:14px;transform:translate(-50%,-50%)} .faq-item.open .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--eo)} .faq-item.open .faq-a{grid-template-rows:1fr} .faq-a__in{overflow:hidden} .faq-a p{color:var(--muted);font-size:.94rem;line-height:1.7;padding:0 .5rem 1.15rem;max-width:62ch} @media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-scroll{max-height:clamp(360px,58vh,520px)}} @media (prefers-reduced-motion:reduce){.faq-a{transition:none}} /* ============================================================ FOOTER */ .footer{position:relative;background:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(3.5rem,6vw,5rem) 2rem;overflow:hidden} .ft-wordmark{position:relative;z-index:2;width:100%;margin:0 auto clamp(2.5rem,5vw,4rem);opacity:.9} .ft-wordmark img{width:100%;filter:drop-shadow(0 0 40px rgba(255,83,29,.25))} .ft-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.6fr repeat(4,minmax(120px,1fr));gap:clamp(1.4rem,2.2vw,2.5rem)} @media (max-width:1180px){.ft-grid{grid-template-columns:1.4fr repeat(2,1fr);row-gap:2rem}} .ft-brand p{color:var(--muted);max-width:34ch;font-size:.92rem;margin-top:1rem} .footer h5{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.1rem} .ft-col a,.ft-col address{display:block;color:var(--muted);font-style:normal;font-size:.92rem;margin-bottom:.6rem;transition:color .25s} .ft-col a:hover{color:var(--orange)} .socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} .socials a{width:40px;height:40px;border:1px solid var(--line-3);border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:.3s var(--ease)} .socials a:hover{color:#08080A;background:var(--orange);border-color:var(--orange);transform:translateY(-3px);box-shadow:0 10px 26px -10px var(--orange-glow)} .socials a.merch:hover{background:var(--teal);border-color:var(--teal)} .socials svg{width:18px;height:18px} .ft-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted-2)} .ft-bottom a:hover{color:var(--ink)} /* Touch-Ziele: die Footer-Links waren nur ~13px hoch (Lighthouse/WCAG 2.5.8). padding-block auf einem inline-Element vergroessert die Trefferflaeche, veraendert die Zeilenhoehe aber NICHT -> optisch identisch, nur besser triffbar. */ .ft-bottom a{display:inline;padding-block:.75rem} /* Burger: 39x29 sichtbar. Ein unsichtbares ::after vergroessert die Trefferflaeche auf 44x44, ohne das Icon selbst anzufassen. */ .burger{position:relative} .burger::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px} @media (max-width:760px){ /* brand full width on top, Navigation + Kontakt side by side below */ .ft-grid{grid-template-columns:1fr 1fr;gap:2.2rem 1.4rem} .ft-brand{grid-column:1/-1} .ft-brand{grid-column:1 / -1;text-align:center} .ft-brand p{margin-inline:auto} /* 8 social icons → 4 per row, two rows, centered */ .socials{display:grid;grid-template-columns:repeat(4,42px);justify-content:center;gap:.6rem} } /* ---------- discography hover poster ---------- */ .disc-preview{position:fixed;z-index:115;top:0;left:0;width:clamp(170px,14vw,230px);aspect-ratio:1;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.84) rotate(-7deg);transition:opacity .32s var(--eo),transform .32s var(--eo);box-shadow:0 30px 70px -16px #000,0 0 0 1px var(--line-3)} .disc-preview.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)} .disc-preview img{width:100%;height:100%;object-fit:cover} @media (hover:none),(pointer:coarse){.disc-preview{display:none}} /* ---------- footer lanyard badge (swings on mouse, holographic) ---------- */ .lanyard{position:absolute;top:-6px;right:clamp(1rem,6vw,5rem);z-index:4;width:250px;height:392px;pointer-events:none} .lanyard__pivot{position:absolute;top:0;left:50%;transform-origin:top center;will-change:transform} .lanyard__strap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:152px;background:linear-gradient(180deg,var(--orange),#9c310e);border-radius:0 0 2px 2px;box-shadow:0 0 20px var(--orange-glow)} .lanyard__strap::after{content:"KARL KANE";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--mono);font-size:.5rem;letter-spacing:.3em;color:rgba(10,10,11,.7);font-weight:600} .lanyard__clip{position:absolute;top:144px;left:50%;transform:translateX(-50%);width:38px;height:22px;border:2px solid #9a9aa0;border-radius:6px;background:linear-gradient(180deg,#e8e8ec,#7c7c84)} .lanyard__card{position:absolute;top:160px;left:50%;transform:translateX(-50%);width:218px;height:200px;border-radius:16px;background:linear-gradient(158deg,#20202a,#0b0b0e);border:1px solid var(--line-3);box-shadow:0 34px 70px -14px #000,inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1.8rem 1.2rem 1.3rem} .lanyard__hole{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:52px;height:9px;border-radius:6px;background:#000;box-shadow:inset 0 0 4px #000,0 1px 0 rgba(255,255,255,.06)} .lanyard__logo{width:66px;height:66px;object-fit:contain;margin-top:.6rem;opacity:.96;filter:drop-shadow(0 0 12px rgba(255,255,255,.18))} .lanyard__name{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:.02em;text-transform:uppercase;line-height:1} .lanyard__role{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--teal);text-transform:uppercase} .lanyard__bc{font-family:var(--mono);font-size:.55rem;letter-spacing:.36em;color:var(--muted-2);margin-top:.25rem} .lanyard__holo{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;pointer-events:none} .lanyard__holo::before{content:"";position:absolute;top:-60%;left:0;width:48%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),rgba(94,211,187,.2),rgba(255,83,29,.16),transparent);transform:translateX(-200%) rotate(16deg);animation:sweep 6.5s ease-in-out infinite} @media (max-width:920px){.lanyard{position:relative;top:auto;right:auto;margin:0 auto 3rem}} @media (prefers-reduced-motion:reduce){.lanyard__holo::before,.hl__holo::before{animation:none;opacity:.5}} /* ============================================================ FLOATING DOCK (WA + CTA) */ /* ============================================================ COOKIE CONSENT */ .cc{position:fixed;left:0;right:0;bottom:0;z-index:200;padding:clamp(.7rem,2vw,1.3rem);display:flex;justify-content:center;pointer-events:none;animation:ccIn .5s var(--eo) both} @keyframes ccIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .cc[hidden]{display:none} .cc__in{pointer-events:auto;width:100%;max-width:var(--maxw);display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;justify-content:space-between;background:rgba(12,12,15,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-3);border-radius:var(--r);padding:clamp(1rem,2vw,1.4rem) clamp(1.2rem,2.4vw,1.8rem);box-shadow:0 30px 80px -20px #000} .cc__txt{flex:1 1 320px} .cc__txt b{font-family:var(--display);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em} .cc__txt p{color:var(--muted);font-size:.84rem;line-height:1.6;margin-top:.35rem;max-width:78ch} .cc__txt a{color:var(--teal);text-decoration:underline} .cc__btns{display:flex;gap:.7rem;flex:none;flex-wrap:wrap} .cc__btns .btn{font-size:.72rem;padding:.85rem 1.35rem} @media (max-width:600px){.cc__btns{width:100%}.cc__btns .btn{flex:1 1 auto;justify-content:center}} /* DSGVO/TDDDG: Ablehnen muss gleichwertig gestaltet sein wie Zustimmen. Der globale .btn--ghost (transparent, Rand mit 14% Deckkraft) war deutlich schwaecher als der orange Accept-Button. Hier scoped auf den Cookie-Banner auf gleiche Groesse, Typo und Sichtbarkeit gezogen - Rest der Seite bleibt. */ .cc__btns .btn{border:1px solid transparent} .cc__btns .btn--ghost{background:rgba(246,244,240,.10);border:1px solid rgba(246,244,240,.55);color:var(--ink)} .cc__btns .btn--ghost:hover{background:rgba(246,244,240,.18);border-color:var(--ink)} /* iOS: Home-Indicator darf den Accept-Button nicht ueberdecken */ .cc{padding-bottom:calc(clamp(.7rem,2vw,1.3rem) + env(safe-area-inset-bottom,0px))} .dock{position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:.9rem;transform:translateY(130px);opacity:0;transition:transform .55s var(--eo),opacity .5s} .dock.show{transform:none;opacity:1} .fab{position:relative;display:flex;align-items:center;gap:.65rem;border-radius:100px;padding:.8rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;transition:padding .35s var(--eo),transform .35s var(--eo);overflow:visible} .fab svg{width:26px;height:26px;flex:none} .fab .t{max-width:0;white-space:nowrap;opacity:0;overflow:hidden;transition:max-width .4s var(--eo),opacity .3s,margin .4s} .fab:hover{transform:translateY(-2px)} .fab:hover .t{max-width:220px;opacity:1;margin-left:.15rem;margin-right:.4rem} /* glowing pulse ring (uses bright brand color, not dark text color) */ .fab::after{content:"";position:absolute;inset:0;border-radius:100px;border:2px solid var(--ring);opacity:.7;animation:ring 2.4s var(--ease) infinite;pointer-events:none} .fab::before{content:"";position:absolute;inset:0;border-radius:100px;box-shadow:0 0 22px 2px var(--ring);opacity:.55;animation:glowpulse 2.4s ease-in-out infinite;pointer-events:none} @keyframes ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}} @keyframes glowpulse{0%,100%{opacity:.35}50%{opacity:.8}} .fab--wa{--ring:#3DF08A;background:#25D366;color:#06231a;box-shadow:0 14px 40px -6px rgba(37,211,102,.65)} .fab--book{--ring:var(--orange-2);background:var(--orange);color:#0A0A0B;box-shadow:0 14px 40px -6px var(--orange-glow)} @media (prefers-reduced-motion:reduce){.fab::after,.fab::before{animation:none}} /* ============================================================ LIGHTBOX */ .lb{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);background:rgba(5,5,6,.94);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s} .lb.open{opacity:1;visibility:visible} /* near-fullscreen 16:9 — fills the viewport while keeping ratio */ .lb__in{width:min(96vw,calc((100svh - 6rem) * 16 / 9));aspect-ratio:16/9;position:relative;transform:scale(.94);transition:transform .5s var(--eo)} .lb.open .lb__in{transform:scale(1)} .lb__in>div{position:absolute;inset:0} .lb iframe{width:100%;height:100%;border:0;border-radius:14px;box-shadow:0 30px 90px -16px #000,0 0 0 1px var(--line-2)} .lb__x{position:absolute;top:-2.6rem;right:0;display:flex;align-items:center;gap:.5rem;color:var(--muted);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;z-index:2} .lb__x:hover{color:var(--ink)} .lb__x svg{width:22px;height:22px} /* ============================================================ INTRO LOADER (centered, particle-revealed lanyard) */ .icurtain{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 38%,#0e0e15,var(--bg) 62%);overflow:hidden;transition:opacity .85s var(--eo),visibility .85s} .icurtain::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 16.66%);opacity:.5;pointer-events:none} .icurtain.gone{opacity:0;visibility:hidden;pointer-events:none} .ic__stage{position:relative;display:grid;place-items:center;width:min(82vw,340px)} .ic__code{position:absolute;inset:-65% -50%;margin:0;font-family:var(--mono);font-size:11px;line-height:13px;white-space:pre;overflow:hidden;color:rgba(120,200,185,0);opacity:0;transition:opacity .35s ease,color .35s ease;pointer-events:none; -webkit-mask-image:radial-gradient(58% 56% at 50% 50%,#000,transparent 82%);mask-image:radial-gradient(58% 56% at 50% 50%,#000,transparent 82%)} .ic__code.show{opacity:1;color:rgba(120,200,185,.5)} .ic__px{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:160%;height:150%;pointer-events:none;z-index:3} .ic__meta{position:absolute;bottom:-3.2rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2)} .ic__meta span{color:var(--orange)} .ic__badge{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;opacity:0;will-change:opacity,transform;transform-origin:center top} .ic__strap{position:relative;width:18px;height:clamp(70px,11vh,124px);background:linear-gradient(180deg,var(--orange),#9c310e);box-shadow:0 0 24px var(--orange-glow)} .ic__strap::after{content:"ALL ACCESS";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--mono);font-size:.5rem;letter-spacing:.3em;color:rgba(10,10,11,.72);font-weight:600} .ic__clip{width:34px;height:20px;margin-top:-3px;border:2px solid #9a9aa0;border-radius:6px;background:linear-gradient(180deg,#e8e8ec,#7c7c84)} .ic__card{position:relative;width:clamp(168px,46vw,208px);aspect-ratio:5/6;margin-top:-2px;border-radius:18px;background:linear-gradient(158deg,#22222c,#0b0b0e);border:1px solid var(--line-3);box-shadow:0 30px 70px -14px #000,inset 0 1px 0 rgba(255,255,255,.08),0 0 50px -6px rgba(94,211,187,.18);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.42rem;padding:1.8rem 1.2rem 1.4rem} .ic__hole{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:44px;height:8px;border-radius:5px;background:#000;box-shadow:inset 0 0 4px #000} .ic__logo{width:clamp(52px,12vw,64px);height:auto;margin-top:.5rem;opacity:.97;filter:drop-shadow(0 0 12px rgba(255,255,255,.2))} .ic__name{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,4vw,1.4rem);text-transform:uppercase;line-height:1} .ic__role{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--teal);text-transform:uppercase} .ic__bc{font-family:var(--mono);font-size:.5rem;letter-spacing:.34em;color:var(--muted-2);margin-top:.2rem} .ic__holo{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;pointer-events:none} .ic__holo::before{content:"";position:absolute;top:-60%;left:0;width:48%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),rgba(94,211,187,.2),rgba(255,83,29,.16),transparent);transform:translateX(-200%) rotate(16deg);animation:sweep 6s ease-in-out infinite} /* hold the hero's entrance animations until the curtain lifts */ html.intro-lock .hero *{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){.icurtain{display:none}} [hidden]{display:none!important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ============================================================ BEWERTUNGEN · Laufband Reine Conversion-Komponente: echte Google-Bewertungen als Zitate. BEWUSST OHNE AggregateRating/Review-Schema — Google verbietet das Auszeichnen fremder bzw. selbst kontrollierter Bewertungen ("Don't aggregate reviews or ratings from other websites"; LocalBusiness/Organization sind vom Sterne- Feature ausgeschlossen). Die Sterne in der Suche kommen aus dem Unternehmensprofil, nicht von hier. Nutzt @keyframes marquee aus dem Ticker-Block weiter oben. */ .rvw{position:relative;z-index:2;padding-block:clamp(2.6rem,5vw,4.2rem)} .rvw__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.6rem 1.4rem;margin-bottom:clamp(1.4rem,2.6vw,2.2rem);text-align:center} .rvw__score{display:inline-flex;align-items:baseline;gap:.7rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .rvw__score b{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:0;color:var(--ink)} .rvw__stars{color:var(--orange);letter-spacing:.12em;font-size:.95rem;text-shadow:0 0 18px var(--orange-glow)} .rvw__link{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid rgba(94,211,187,.35);padding-bottom:.15rem;transition:color .3s,border-color .3s} .rvw__link:hover{color:var(--teal-2);border-color:var(--teal-2)} .rvw__band{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(1.2rem,2.2vw,1.9rem);background:rgba(8,8,10,.4); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .rvw__track{display:flex;align-items:stretch;gap:clamp(.9rem,1.6vw,1.4rem);width:max-content;animation:marquee 88s linear infinite} .rvw__dup{display:flex;align-items:stretch;gap:clamp(.9rem,1.6vw,1.4rem)} [data-scroll="up"] .rvw__track{animation-direction:reverse} .rvwc{flex:none;width:clamp(255px,25vw,360px);display:flex;flex-direction:column;gap:.6rem;margin:0;padding:1.15rem 1.35rem;border:1px solid var(--line-3);border-radius:14px;background:rgba(10,10,13,.66);backdrop-filter:blur(4px);transition:border-color .35s,background .35s,box-shadow .35s,transform .55s var(--eo)} .rvwc__st{color:var(--orange);font-size:.78rem;letter-spacing:.1em} .rvwc blockquote{margin:0;font-size:.9rem;line-height:1.58;color:var(--ink);flex:1} .rvwc figcaption{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .rvwc figcaption span{color:var(--muted-2)} /* hover: Band laeuft weiter, nur die Karte hebt sich — wie bei Ticker und City-Band */ .rvwc:hover{border-color:rgba(94,211,187,.55);background:rgba(22,22,28,.85);box-shadow:0 0 42px rgba(94,211,187,.2);transform:translateY(-3px)} .rvw__note{margin-top:.9rem;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} html.theme-light .rvw__band{background:rgba(0,0,0,.03)} html.theme-light .rvwc{background:rgba(0,0,0,.02)} html.theme-light .rvwc:hover{background:rgba(0,0,0,.05);box-shadow:0 18px 40px -28px rgba(0,0,0,.45)} @media (max-width:600px){ .rvw__head{flex-direction:column;align-items:center;gap:.7rem} .rvwc{width:min(80vw,300px)} }