/* laittue.fr : noir profond, grosse typo serrée, tuiles par plateforme. Polices système. */
:root{
  --bg:#000; --text:#f5f5f7; --dim:#86868b; --faint:#6e6e73;
  --card:#101012; --card-2:#17171a; --line:rgba(255,255,255,.08);
  --accent:#c6f36b; --accent2:#ff4fa3; --hl:#ff4fa3; --hover:#ff4fa3;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:64px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:-.022em; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block; max-width:100%}
.dot{color:var(--accent)}

/* Barre du haut */
.nav{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:20px;
  height:52px; padding:0 max(16px, env(safe-area-inset-left));
  background:rgba(0,0,0,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-logo{font-weight:700; font-size:19px; letter-spacing:-.04em; text-decoration:none; flex:none}
.nav-links{display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; margin-left:auto; font-size:13px}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{color:var(--dim); text-decoration:none; white-space:nowrap; transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--hover)}

/* Accueil plein écran */
.hero{
  position:relative; min-height:calc(100svh - 52px); display:flex; flex-direction:column; justify-content:center;
  padding:0 16px 120px; overflow:hidden;
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transform:scale(1.04)}
.hero.has-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.35) 55%,#000 100%)}
.hero:not(.has-photo)::before,.hero:not(.has-photo)::after{
  content:""; position:absolute; width:90vmax; height:90vmax; border-radius:50%; pointer-events:none; filter:blur(40px);
}
.hero:not(.has-photo)::before{left:-35vmax; top:-30vmax; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); animation:drift1 16s ease-in-out infinite alternate}
.hero:not(.has-photo)::after{right:-40vmax; bottom:-35vmax; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 40%, transparent), transparent); animation:drift2 19s ease-in-out infinite alternate}
.hero-inner{position:relative; z-index:1; width:100%; max-width:1080px; margin:0 auto}
.hero-name{
  margin:0; font-size:clamp(76px,24vw,220px); line-height:.86; font-weight:700; letter-spacing:-.065em;
  animation:rise 1s var(--ease) both;
}
.hero-tag{
  margin:22px 0 0; max-width:22ch; font-size:clamp(22px,5.4vw,34px); line-height:1.15; font-weight:600; letter-spacing:-.035em; color:var(--dim);
  animation:rise 1s .12s var(--ease) both;
}
.scroll-hint{
  position:absolute; z-index:1; left:50%; bottom:28px; width:40px; height:40px; margin-left:-20px;
  display:grid; place-items:center; border-radius:50%; color:var(--dim); border:1px solid var(--line);
  animation:bob 2.4s var(--ease) infinite;
}
.scroll-hint svg{width:20px; height:20px}

/* Blocs */
.block{max-width:1080px; margin:0 auto; padding:56px 16px 8px}
.block-title{margin:0 0 22px; font-size:clamp(40px,11vw,64px); line-height:1; font-weight:700; letter-spacing:-.05em}

/* À la une */
.feature{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:340px;
  border-radius:28px; overflow:hidden; text-decoration:none; isolation:isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
    linear-gradient(160deg,#1a1d14,#0b0c09);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--ease);
}
.feature-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:transform 1.2s var(--ease)}
.feature.has-img::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.9))}
.feature:hover .feature-img{transform:scale(1.04)}
.feature-body{padding:28px 24px}
.kicker{display:block; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
.feature-title{display:block; margin-top:8px; font-size:clamp(34px,9vw,56px); line-height:1; font-weight:700; letter-spacing:-.05em}
.cta{
  display:inline-block; margin-top:22px; padding:11px 22px; border-radius:999px;
  background:var(--accent); color:#0a0a0a; font-size:16px; font-weight:600; letter-spacing:-.01em;
  transition:transform .25s var(--ease), filter .25s;
}
.feature:hover .cta{transform:scale(1.04); filter:brightness(1.08)}

/* Tuiles */
.tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:560px){ .tiles{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .tiles{grid-template-columns:1fr 1fr 1fr} }
.tile{
  position:relative; display:flex; align-items:center; gap:14px; height:100%;
  padding:16px 18px; border-radius:20px; background:var(--card); text-decoration:none; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s var(--ease), background .35s, box-shadow .35s;
}
.tile::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(220px circle at var(--x,0%) var(--y,50%), color-mix(in srgb, var(--hov) 26%, transparent), transparent 70%);
}
.tile{--hov:var(--hover)}
.tile-ico,.rel-ico{color:var(--brand)}
.hover-brand .tile{--hov:var(--brand)}
.tile:hover,.tile:focus-visible{background:var(--card-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hov) 60%, transparent), 0 12px 40px -18px var(--hov); outline:none}
.tile:hover::before,.tile:focus-visible::before{opacity:1}
.tile:active{transform:scale(.98)}
.tile-ico{
  position:relative; flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:color-mix(in srgb, var(--brand) 14%, #1c1c1e); color:var(--brand);
}
.ico{width:22px; height:22px}
.tile-txt{position:relative; flex:1; min-width:0}
.tile-name{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile-sub{display:block; font-size:14px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.arrow{position:relative; flex:none; width:14px; height:14px; color:var(--faint); transition:transform .35s var(--ease), color .35s}
.tile:hover .arrow{transform:translate(2px,-2px); color:var(--hov)}

/* Logo perso et images */
.nav-logo img{height:24px; width:auto; display:block}
.hero-logo{line-height:0}
.hero-logo img{width:min(100%, 560px); height:auto; max-height:45svh; object-fit:contain; object-position:left center}
.block-img{margin:0 0 14px; border-radius:24px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); background:var(--card)}
.block-img img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 1.2s var(--ease)}
.block-img:hover img{transform:scale(1.03)}
.tile-ico.custom{background:none; overflow:hidden}
.tile-ico.custom img{width:100%; height:100%; object-fit:cover}

/* Bio */
.bio{max-width:640px; font-size:clamp(19px,4.6vw,24px); line-height:1.4; letter-spacing:-.03em; color:var(--dim)}
.bio p{margin:0 0 16px}
.empty{max-width:1080px; margin:0 auto; padding:40px 16px; color:var(--dim)}

/* Pied de page */
.foot{
  max-width:1080px; margin:80px auto 0; padding:22px 16px calc(28px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--faint); border-top:1px solid var(--line);
}
.foot a{color:var(--dim); text-decoration:none}
.foot a:hover{color:var(--hover); text-decoration:none}

/* Apparition au défilement, active seulement si le script tourne */
.anim .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.anim .reveal.in{opacity:1; transform:none}

@keyframes rise{from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}
@keyframes drift1{from{transform:translate(0,0) scale(1)} to{transform:translate(18vmax,22vmax) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)} to{transform:translate(-22vmax,-18vmax) scale(.9)}}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes hue{0%,100%{color:var(--accent)} 50%{color:var(--accent2)}}

/* Pages texte (404, mentions légales) */
.wrap{width:100%; max-width:640px; margin:0 auto; padding:56px 16px 40px}
.page h1{margin:0 0 28px; font-size:40px; line-height:1.05; font-weight:700; letter-spacing:-.045em}
.page h2{margin:32px 0 8px; font-size:17px; font-weight:600}
.page p{margin:0 0 10px; color:var(--dim); font-size:15px; line-height:1.55}
.page p a{color:var(--accent); text-decoration:none}
.back{display:inline-block; margin-bottom:40px; font-size:15px; color:var(--accent); text-decoration:none}
.lost{min-height:80svh; display:flex; flex-direction:column; justify-content:center}
.lost .code{margin:0; font-size:clamp(96px,32vw,180px); line-height:.9; font-weight:700; letter-spacing:-.07em; animation:rise 1s var(--ease) both}
.lost .code span{color:var(--accent)}
.lost h1{margin:18px 0 10px; font-size:28px; line-height:1.1; letter-spacing:-.035em}
.lost p{margin:0; color:var(--dim)}
.pill{align-self:flex-start; margin-top:28px; padding:12px 22px; border-radius:999px; background:var(--accent); color:#0a0a0a; font-weight:600; text-decoration:none}
.lost + .foot, .page + .foot{margin-top:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

/* Pages de sortie (/s/) */
.release-page{min-height:100svh; display:flex; flex-direction:column; overflow-x:hidden; background:transparent}
.rel-bg{position:fixed; inset:-60px; z-index:-1; background-size:cover; background-position:center; filter:blur(60px) saturate(1.4); opacity:.45; transform:scale(1.1)}
.rel-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2),#000 85%)}
.rel{flex:1; width:100%; max-width:440px; margin:0 auto; padding:28px 16px 24px; text-align:center}
.rel-back{display:block; text-align:left; margin-bottom:28px; font-size:15px; color:var(--dim); text-decoration:none}
.rel-cover{width:min(78vw,320px); aspect-ratio:1; object-fit:cover; margin:0 auto; border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); animation:pop .9s var(--ease) both}
.rel-title{margin:26px 0 4px; font-size:clamp(30px,8.5vw,44px); line-height:1.02; font-weight:700; letter-spacing:-.045em; animation:rise .9s .1s var(--ease) both}
.rel-artist{margin:0 0 26px; color:var(--dim); font-size:17px; animation:rise .9s .16s var(--ease) both}
.rel-links{list-style:none; margin:0; padding:0; display:grid; border-radius:18px; overflow:hidden; background:rgba(28,28,30,.72);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:inset 0 0 0 1px var(--line); text-align:left}
.rel-links li+li a{box-shadow:inset 0 1px 0 var(--line)}
.rel-links a{display:flex; align-items:center; gap:14px; padding:13px 14px; text-decoration:none; transition:background .2s}
.rel-links a{--hov:var(--hover)}
.hover-brand .rel-links a{--hov:var(--brand)}
.rel-links a:hover{background:color-mix(in srgb, var(--hov) 12%, transparent)}
.rel-ico{flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:var(--brand); background:color-mix(in srgb, var(--brand) 14%, #1c1c1e)}
.rel-ico .ico{width:20px; height:20px}
.rel-name{flex:1; font-weight:600}
.rel-go{flex:none; padding:6px 14px; border-radius:999px; font-size:14px; font-weight:600; background:rgba(255,255,255,.1); transition:background .2s, color .2s}
.rel-links a:hover .rel-go{background:var(--accent); color:#0a0a0a}
.rise{animation:rise .7s calc(.25s + var(--i,0) * 60ms) var(--ease) both}
@keyframes pop{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}}
.disco{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 12px}
.disco a{display:block; text-decoration:none}
.disco img,.disco-ph{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:var(--card); box-shadow:0 0 0 1px var(--line)}
.disco-t{display:block; margin-top:8px; font-weight:600; font-size:15px}
.disco-d{display:block; color:var(--dim); font-size:13px}
.shelf{list-style:none; margin:0 -16px; padding:0 16px 6px; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf li{flex:none; width:min(58vw,240px); scroll-snap-align:start}
.shelf a{display:block; text-decoration:none}
.shelf img,.shelf-ph{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line); transition:transform .5s var(--ease)}
.shelf a:hover img{transform:scale(1.03)}
.shelf-t{display:block; margin-top:10px; font-weight:600}
.shelf-d{display:block; color:var(--dim); font-size:14px}

/* Peps */
::selection{background:var(--hl); color:#000}
body::after{content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .dot{animation:hue 6s ease-in-out infinite}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero-name{background:linear-gradient(100deg,var(--text) 0%,var(--text) 55%,color-mix(in srgb,var(--accent) 70%,#fff) 75%,var(--text) 92%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:rise 1s var(--ease) both, shine 7s 1.2s ease-in-out infinite}
.hero-name .dot{-webkit-text-fill-color:currentColor}
.hero-logo{background:none; -webkit-text-fill-color:initial}
}
@keyframes shine{0%,60%{background-position:100% 0} 100%{background-position:-50% 0}}
.marquee{overflow:hidden; background:var(--accent); color:#0a0a0a; transform:rotate(-2deg) scale(1.04); margin:-36px 0 24px; position:relative; z-index:2;
  box-shadow:0 10px 40px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.marquee-track{display:flex; width:max-content; animation:slide 22s linear infinite}
.marquee-run{display:flex; align-items:center; gap:22px; padding:14px 11px; font-size:clamp(18px,5vw,26px); font-weight:800; letter-spacing:-.03em; text-transform:uppercase; white-space:nowrap}
.marquee-run i{font-style:normal; color:var(--accent2); font-size:.8em}
.tile:hover,.tile:focus-visible{transform:translateY(-3px)}
.tile:hover .tile-ico{transform:rotate(-8deg) scale(1.08)}
.tile-ico{transition:transform .35s var(--ease)}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.block-title .dot{color:var(--accent2)}
.block:nth-of-type(odd) .block-title .dot{color:var(--accent)}
.feature:hover{transform:translateY(-4px) rotate(-.4deg)}
.rel-links a:hover .rel-go{background:var(--hov); color:#0a0a0a}
.pill{background:linear-gradient(90deg,var(--accent),var(--accent2))}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} .hero-name{animation:none} }

/* Survol personnalisé */
.feature:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hover) 55%, transparent), 0 20px 60px -24px var(--hover)}
.shelf a:hover .shelf-t,.disco a:hover .disco-t{color:var(--hover)}
.back:hover,.rel-back:hover{color:var(--hover)}

/* Effets souris (activés par site.js sur ordinateur) */
.mouse .hero:not(.has-photo)::before{translate:calc(var(--px,0) * -60px) calc(var(--py,0) * -60px); transition:translate .8s var(--ease)}
.mouse .hero:not(.has-photo)::after{translate:calc(var(--px,0) * 70px) calc(var(--py,0) * 70px); transition:translate .8s var(--ease)}
.mouse .hero-bg{translate:calc(var(--px,0) * -24px) calc(var(--py,0) * -24px); transition:translate .8s var(--ease)}
.mouse .tile .tile-ico{translate:calc(var(--dx,0) * 5px) calc(var(--dy,0) * 5px)}
.mouse .tile:hover .tile-ico{transform:rotate(calc(var(--dx,0) * -12deg)) scale(1.12)}
.mouse .feature{transform:perspective(900px) rotateY(calc(var(--dx,0) * 5deg)) rotateX(calc(var(--dy,0) * -5deg)); transition:transform .4s var(--ease), box-shadow .35s}
.mouse .feature::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(400px circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.14), transparent 60%)}
.mouse .feature:not(.has-img)::before{z-index:0}
.mouse .feature:hover::before{opacity:1}
.mouse .shelf a img,.mouse .rel-cover{transform:perspective(700px) rotateY(calc(var(--dx,0) * 8deg)) rotateX(calc(var(--dy,0) * -8deg)); transition:transform .4s var(--ease)}
.mouse .rel-cover{transform:perspective(800px) rotateY(calc(var(--px,0) * 10deg)) rotateX(calc(var(--py,0) * -10deg))}
.mouse .rel-bg{translate:calc(var(--px,0) * -40px) calc(var(--py,0) * -40px); transition:translate 1s var(--ease)}
.mouse .rel-links .rel-ico{translate:calc(var(--dx,0) * 4px) calc(var(--dy,0) * 4px); transition:translate .2s}
main,.foot,.nav{position:relative; z-index:1}
.nav{z-index:10}

/* Fond animé des logos */
.tile-ico,.rel-ico{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 10%, #18181a) 0%,
    color-mix(in srgb, var(--brand) 32%, #18181a) 35%,
    color-mix(in srgb, var(--accent2) 22%, #18181a) 65%,
    color-mix(in srgb, var(--brand) 10%, #18181a) 100%);
  background-size:300% 300%; animation:icoflow 7s ease-in-out infinite;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent)}
.tiles li:nth-child(2n) .tile-ico,.rel-links li:nth-child(2n) .rel-ico{animation-delay:-2.3s}
.tiles li:nth-child(3n) .tile-ico,.rel-links li:nth-child(3n) .rel-ico{animation-delay:-4.6s}
.tile:hover .tile-ico,.rel-links a:hover .rel-ico{animation-duration:2.2s; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hov) 60%, transparent), 0 0 18px -4px var(--hov)}
.tile-ico.custom{animation:none; background:none; box-shadow:none}
@keyframes icoflow{0%,100%{background-position:0% 0%} 50%{background-position:100% 100%}}

/* Fond animé derrière ton nom ou ton logo, en haut de l'accueil */
.hero-name{position:relative; isolation:isolate}
.hero-name::before{
  content:""; position:absolute; z-index:-1; left:-6%; top:-18%; width:min(112%, 900px); height:136%;
  border-radius:50%; filter:blur(48px); opacity:.55; pointer-events:none;
  background:conic-gradient(from var(--spin,0deg), var(--accent), var(--accent2), var(--hover), var(--accent));
  animation:spin 14s linear infinite, pulse 6s ease-in-out infinite alternate;
}
.hero-logo::before{left:-4%; width:min(108%, 620px)}
@property --spin{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes spin{to{--spin:360deg}}
@keyframes pulse{from{opacity:.35; transform:scale(.92)} to{opacity:.6; transform:scale(1.04)}}

/* Page QR (seulement via le tatouage) */
.qr-page{background:var(--qbg); color:var(--qfg); min-height:100svh; display:flex}
.qr-page::after{display:none}
.qp{margin:auto; width:100%; max-width:520px; padding:48px 20px calc(40px + env(safe-area-inset-bottom)); text-align:center}
.qp-photo{width:100%; max-height:60svh; object-fit:cover; border-radius:22px; margin:0 auto 28px; animation:pop .9s var(--ease) both}
.qp-title{margin:0 0 14px; font-size:clamp(34px,10vw,56px); line-height:1; font-weight:700; letter-spacing:-.05em; animation:rise .9s .1s var(--ease) both}
.qp-text{font-size:clamp(18px,4.8vw,22px); line-height:1.45; letter-spacing:-.025em; opacity:.85; animation:rise .9s .2s var(--ease) both}
.qp-text p{margin:0 0 14px}
.qp-home{display:inline-block; margin-top:28px; font-size:14px; color:inherit; opacity:.55; text-decoration:none}
.qp-home:hover{opacity:1}

/* Téléphone penché (activé par site.js avec le gyroscope) */
.tilt .tile{translate:calc(var(--tx,0) * (2.2px + var(--i,0) * 0.6px)) calc(var(--ty,0) * (2.2px + var(--i,0) * 0.6px))}
.tilt .tile-ico{translate:calc(var(--tx,0) * 2.8px) calc(var(--ty,0) * 2.8px)}
.tilt .tile::before{opacity:.35; background:radial-gradient(220px circle at calc(50% + var(--tx,0) * 45%) calc(50% + var(--ty,0) * 55%), color-mix(in srgb, var(--hov) 22%, transparent), transparent 70%)}
.tilt .feature{translate:calc(var(--tx,0) * 4.4px) calc(var(--ty,0) * 4.4px)}
.tilt .feature-img,.tilt .block-img img{translate:calc(var(--tx,0) * -8px) calc(var(--ty,0) * -8px); scale:1.08}
.tilt .shelf img{translate:calc(var(--tx,0) * 3.9px) calc(var(--ty,0) * 3.9px)}
.tilt .hero-bg{translate:calc(var(--tx,0) * -12px) calc(var(--ty,0) * -12px); scale:1.06}
.tilt .hero:not(.has-photo)::before{translate:calc(var(--tx,0) * -28px) calc(var(--ty,0) * -28px)}
.tilt .hero:not(.has-photo)::after{translate:calc(var(--tx,0) * 33px) calc(var(--ty,0) * 33px)}
.tilt .hero-inner{translate:calc(var(--tx,0) * 4.4px) calc(var(--ty,0) * 4.4px)}
.tilt .rel-cover{translate:calc(var(--tx,0) * 5.5px) calc(var(--ty,0) * 5.5px)}
.tilt .rel-bg{translate:calc(var(--tx,0) * -16px) calc(var(--ty,0) * -16px)}
.tilt .rel-links a{translate:calc(var(--tx,0) * (1.7px + var(--i,0) * 0.6px)) calc(var(--ty,0) * (1.7px + var(--i,0) * 0.6px))}
.tilt-btn{position:absolute; left:50%; bottom:92px; z-index:2; translate:-50% 0; padding:8px 14px; border:0; border-radius:999px;
  background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--text,#f5f5f7); font:inherit; font-size:13px; box-shadow:inset 0 0 0 1px var(--line)}