/* ============================================================
   tynqueevue.com — motion layer v1
   Loaded after style.css on the home page.
   ============================================================ */
:root{
  --ink:#1d1d1f;
  --muted:#86868b;
  --motion-blue:#0071e3;
  --motion-violet:#7a5cff;
  --motion-warm:#ff8a6b;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- scroll progress / cursor glow ---------- */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:500;pointer-events:none;
  background:transparent;
}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#0071e3 0%,#6f5cff 48%,#ff8a6b 100%);
  box-shadow:0 0 18px rgba(0,113,227,.32);
  transition:width .08s linear;
}
.cursor-glow{
  position:fixed;width:380px;height:380px;left:0;top:0;z-index:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(0,113,227,.13),rgba(122,92,255,.06) 38%,transparent 68%);
  filter:blur(24px);mix-blend-mode:multiply;transition:opacity .5s ease;
}
@media(pointer:fine){.cursor-glow{opacity:1}}

/* ---------- hero ---------- */
.hero--motion{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#fff 0%,#fbfbfd 48%,#fff 100%);
}
.hero--motion::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.62;
  background-image:radial-gradient(rgba(29,29,31,.075) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 36%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 68% 62% at 50% 36%,#000 0%,transparent 72%);
}
.hero--motion .wrap{position:relative;z-index:3}
.hero--motion .eyebrow{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  color:#6e6e73;letter-spacing:.18em;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:#34c759;
  box-shadow:0 0 0 0 rgba(52,199,89,.36);animation:livePulse 2.4s ease-out infinite;
}
.hero--motion h1{position:relative;z-index:2}
.hero--motion h1 .dim{
  color:transparent;
  background:linear-gradient(100deg,#86868b 10%,#1d1d1f 36%,#86868b 58%,#86868b 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:textFlow 9s linear infinite;
}
.hero--motion .sub{position:relative;z-index:2}
.hero--motion .actions{position:relative;z-index:2}
.btn--music{
  display:inline-flex;align-items:center;gap:10px;background:#1d1d1f;color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.btn--music:hover{background:#000;color:#fff;transform:translateY(-2px)}
.eq-mini{display:flex;align-items:flex-end;gap:2px;height:15px;width:18px}
.eq-mini i{
  display:block;width:2px;height:35%;border-radius:2px;background:#fff;
  transform-origin:bottom;animation:eqMini .9s ease-in-out infinite;animation-play-state:paused;
}
.eq-mini i:nth-child(2){height:75%;animation-delay:-.22s}
.eq-mini i:nth-child(3){height:52%;animation-delay:-.44s}
.eq-mini i:nth-child(4){height:88%;animation-delay:-.11s}
body.music-on .eq-mini i{animation-play-state:running}
.hero-now{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:24px auto 0;color:#86868b;font-size:12px;letter-spacing:.01em;
}
.hero-now .disc{
  width:18px;height:18px;border-radius:50%;
  background:conic-gradient(from 20deg,#1d1d1f,#6f5cff,#ff8a6b,#1d1d1f);
  box-shadow:inset 0 0 0 5px #fff,0 0 0 1px rgba(0,0,0,.08);
  animation:discSpin 8s linear infinite;animation-play-state:paused;
}
body.music-on .hero-now .disc{animation-play-state:running}
.hero-now b{font-weight:600;color:#6e6e73}
.hero-now .state{color:#0071e3}

/* ---------- aurora ---------- */
.aurora{
  position:absolute;inset:-18%;z-index:0;pointer-events:none;filter:blur(58px);
  opacity:.78;transition:opacity .8s ease,filter .8s ease;
}
.aurora-blob{
  position:absolute;border-radius:50%;will-change:transform;
  transform:translate3d(calc(var(--mx,0) * 24px),calc(var(--my,0) * 24px),0);
}
.blob-a{
  width:48vw;height:48vw;max-width:660px;max-height:660px;left:2%;top:-4%;
  background:radial-gradient(circle at 36% 36%,rgba(0,113,227,.30),rgba(0,113,227,0) 66%);
  animation:auroraA 15s ease-in-out infinite alternate;
}
.blob-b{
  width:44vw;height:44vw;max-width:600px;max-height:600px;right:0;top:0;
  background:radial-gradient(circle at 56% 42%,rgba(122,92,255,.24),rgba(122,92,255,0) 68%);
  animation:auroraB 19s ease-in-out infinite alternate;
}
.blob-c{
  width:38vw;height:38vw;max-width:520px;max-height:520px;left:32%;bottom:-18%;
  background:radial-gradient(circle at 50% 50%,rgba(255,138,107,.20),rgba(255,138,107,0) 68%);
  animation:auroraC 17s ease-in-out infinite alternate;
}
body.music-on .aurora{opacity:1;filter:blur(48px) saturate(1.16)}

/* ---------- floating glass cards ---------- */
.hero-floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.float-card{
  position:absolute;display:flex;align-items:center;gap:10px;
  min-width:166px;max-width:190px;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 16px 42px rgba(0,0,0,.08);
  color:#6e6e73;font-size:10px;line-height:1.35;
  animation:floatCard 7s ease-in-out infinite;
}
.float-card b{display:block;color:#1d1d1f;font-size:11px;font-weight:600;margin-bottom:1px}
.float-card .mini-dot{width:7px;height:7px;border-radius:50%;background:#34c759;flex:none;box-shadow:0 0 0 4px rgba(52,199,89,.12)}
.float-card .mini-disc{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:conic-gradient(from 15deg,#1d1d1f,#7a5cff,#ff8a6b,#1d1d1f);
  box-shadow:inset 0 0 0 7px #fff,0 0 0 1px rgba(0,0,0,.08);
}
.float-card--dns{left:2%;top:33%;animation-delay:-2.2s}
.float-card--mail{right:2%;top:29%;animation-delay:-4.4s}
.float-card--play{right:4%;bottom:7%;animation-delay:-1.2s}
.float-card--play .eq-mini{margin-left:auto}
@media(max-width:1399px){.hero-floaters{display:none}}

/* ---------- stat strip ---------- */
.hero--motion .spec{
  width:fit-content;max-width:100%;padding:16px 26px;margin-top:54px;
  border:1px solid rgba(0,0,0,.06);border-radius:22px;
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 12px 36px rgba(0,0,0,.05);
}
.hero--motion .spec b{font-size:clamp(24px,3vw,34px)}
.hero--motion .spec span{font-size:11.5px}

/* ---------- marquee strip ---------- */
.signal-strip{
  position:relative;overflow:hidden;background:#0b0b0d;color:#f5f5f7;
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite;will-change:transform}
.signal-strip:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:34px;padding:14px 0;flex:none}
.marquee-group span{
  display:inline-flex;align-items:center;gap:34px;white-space:nowrap;
  font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,247,.62);
}
.marquee-group span::after{content:"·";color:#8ab4ff;font-size:16px;letter-spacing:0;transform:translateY(-1px)}
.marquee-group span:last-child::after{content:""}

/* ---------- cards / tilt / reveal ---------- */
.card,.game-card{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.card::after,.game-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.85),transparent 62%);
  mix-blend-mode:screen;transition:opacity .35s ease;
}
.card:hover::after,.game-card:hover::after{opacity:.32}
.card:hover,.game-card:hover{
  transform:translateY(-5px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 22px 52px rgba(0,0,0,.10);
}
.section--dark .card:hover{box-shadow:0 22px 52px rgba(0,0,0,.4)}
.reveal{transition-delay:calc(var(--i,0) * 55ms)}
header.site{transition:box-shadow .3s ease,background .3s ease}
header.site.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.035)}

/* ---------- player shell ---------- */
.player{position:fixed;right:20px;bottom:20px;z-index:260;font-family:inherit}
.player-btn{
  position:relative;width:66px;height:66px;border-radius:50%;border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .3s var(--motion-ease),box-shadow .3s var(--motion-ease),background .3s ease;
}
.player-btn:hover{transform:scale(1.06);box-shadow:0 16px 42px rgba(0,0,0,.2);background:rgba(255,255,255,.94)}
.player-btn:focus-visible{outline:2px solid var(--motion-blue);outline-offset:4px}
.player-btn::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(0,113,227,.24);
  opacity:0;transform:scale(.82);transition:opacity .4s ease,transform .4s ease;
}
body.music-on .player-btn::before{opacity:1;transform:scale(1);animation:playerPulse 2.8s ease-out infinite}
.vinyl{
  width:44px;height:44px;border-radius:50%;position:relative;display:block;
  background:repeating-radial-gradient(circle at center,#171719 0 2px,#252529 2px 3px,#171719 3px 4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.3);
}
.vinyl::before{
  content:"";position:absolute;inset:13px;border-radius:50%;
  background:conic-gradient(from 30deg,#0071e3,#7a5cff,#ff8a6b,#0071e3);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);
}
.vinyl::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
body.music-on .vinyl{animation:discSpin 4.8s linear infinite}
.player-tip{
  position:absolute;right:76px;top:50%;transform:translateY(-50%) translateX(6px);
  padding:7px 10px;border-radius:999px;background:rgba(29,29,31,.88);color:#fff;
  font-size:10px;letter-spacing:.03em;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(10px);
}
.player:hover .player-tip{opacity:1;transform:translateY(-50%) translateX(0)}

.player-panel{
  position:absolute;right:0;bottom:80px;width:342px;max-height:calc(100vh - 110px);overflow:auto;padding:17px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);
  border:1px solid rgba(0,0,0,.08);border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.9) inset;
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
  transition:opacity .3s var(--motion-ease),transform .3s var(--motion-ease);
}
.player.open .player-panel{opacity:1;transform:none;pointer-events:auto}
.np-head{display:flex;align-items:center;gap:12px}
.np-cover{
  width:62px;height:62px;border-radius:16px;overflow:hidden;flex:none;position:relative;
  background:#0b0b0d;box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.np-cover img{width:100%;height:100%;object-fit:cover;display:block}
.np-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.np-meta{min-width:0;flex:1}
.np-kicker{display:block;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#86868b;margin-bottom:3px}
.player-panel .t{font-size:16px;font-weight:650;letter-spacing:-.02em;margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-panel .s{font-size:11.5px;color:#86868b;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-close{
  width:26px;height:26px;border:0;border-radius:50%;background:#f5f5f7;color:#6e6e73;
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;flex:none;
  transition:background .2s ease,color .2s ease;
}
.np-close:hover{background:#e8e8ed;color:#1d1d1f}
.eq{display:flex;align-items:flex-end;gap:3px;height:22px;margin:15px 2px 10px}
.eq i{
  display:block;width:3px;height:30%;border-radius:3px;
  background:linear-gradient(180deg,#0071e3,#7a5cff);
  transform-origin:bottom;animation:eqBar .92s ease-in-out infinite;animation-play-state:paused;
}
.eq i:nth-child(2){height:64%;animation-delay:-.18s}
.eq i:nth-child(3){height:42%;animation-delay:-.34s}
.eq i:nth-child(4){height:86%;animation-delay:-.09s}
.eq i:nth-child(5){height:54%;animation-delay:-.27s}
.eq i:nth-child(6){height:76%;animation-delay:-.46s}
.eq i:nth-child(7){height:38%;animation-delay:-.12s}
body.music-on .eq i{animation-play-state:running}

.player-panel input[type=range]{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:4px;margin:0;
  border-radius:999px;background:transparent;cursor:pointer;
}
.player-panel input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(90deg,#0071e3 0%,#7a5cff var(--p,0%),#e5e5ea var(--p,0%),#e5e5ea 100%);
}
.player-panel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;
  background:#fff;border:1px solid rgba(0,0,0,.15);box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.player-panel input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:#e5e5ea}
.player-panel input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:linear-gradient(90deg,#0071e3,#7a5cff)}
.player-panel input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15)}
.time-row{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:#86868b;font-variant-numeric:tabular-nums}
.np-controls{display:flex;align-items:center;gap:12px;margin-top:10px}
.np-play{
  width:42px;height:42px;border:0;border-radius:50%;background:#1d1d1f;color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none;
  transition:transform .2s ease,background .2s ease;
}
.np-play:hover{transform:scale(1.06);background:#000}
.np-play .icon-pause{display:none}
body.music-on .np-play .icon-play{display:none}
body.music-on .np-play .icon-pause{display:inline}
.np-volume{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.np-volume svg{width:15px;height:15px;color:#86868b;flex:none}
.np-volume input[type=range]{flex:1}
.np-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:13px;padding-top:12px;border-top:1px solid rgba(0,0,0,.07);
  color:#0071e3;font-size:11.5px;
}
.np-link:hover{text-decoration:none;color:#0077ed}
.np-link span{font-size:14px;line-height:1}
.player-panel .hint{font-size:10px;color:#a1a1a6;line-height:1.45;margin:9px 0 0}
.player-panel .hint b{color:#6e6e73;font-weight:500}

/* ---------- keyframes ---------- */
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.38)}70%{box-shadow:0 0 0 8px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
@keyframes textFlow{to{background-position:-220% 0}}
@keyframes auroraA{0%{transform:translate3d(calc(var(--mx,0) * 24px),calc(var(--my,0) * 24px),0) scale(1)}100%{transform:translate3d(calc(var(--mx,0) * 24px + 36px),calc(var(--my,0) * 24px - 22px),0) scale(1.08)}}
@keyframes auroraB{0%{transform:translate3d(calc(var(--mx,0) * 24px),calc(var(--my,0) * 24px),0) scale(1.04)}100%{transform:translate3d(calc(var(--mx,0) * 24px - 30px),calc(var(--my,0) * 24px + 28px),0) scale(.96)}}
@keyframes auroraC{0%{transform:translate3d(calc(var(--mx,0) * 24px),calc(var(--my,0) * 24px),0) scale(.96)}100%{transform:translate3d(calc(var(--mx,0) * 24px + 24px),calc(var(--my,0) * 24px + 18px),0) scale(1.06)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes eqMini{0%,100%{transform:scaleY(.38)}50%{transform:scaleY(1)}}
@keyframes eqBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes discSpin{to{transform:rotate(360deg)}}
@keyframes playerPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .live-dot,.hero--motion h1 .dim,.aurora-blob,.float-card,.marquee-track,.eq i,.hero-now .disc,.vinyl,.player-btn::before{animation:none!important}
  .hero--motion h1 .dim{color:#86868b;background:none;-webkit-text-fill-color:#86868b}
  .card:hover,.game-card:hover{transform:translateY(-3px)}
  .reveal{transition-delay:0s!important}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero--motion .spec{padding:14px 18px;gap:24px}
  .hero-floaters{display:none}
  .player-panel{width:min(342px,calc(100vw - 28px))}
}
@media(max-width:560px){
  .hero--motion .eyebrow{font-size:10.5px;letter-spacing:.11em;gap:7px;white-space:nowrap}
  .player{right:14px;bottom:14px}
  .player-btn{width:56px;height:56px}
  .vinyl{width:38px;height:38px}
  .player-panel{right:0;bottom:70px;width:calc(100vw - 28px);padding:15px}
  .hero--motion .spec{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px;width:100%;max-width:320px}
  .hero-now{font-size:11px;flex-wrap:wrap}
  .signal-strip{font-size:10px}
}