*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050506;color:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
#display{position:fixed;inset:0;background:#080809;isolation:isolate}.bg{position:absolute;inset:-20%;z-index:-5;background:center/cover no-repeat;filter:blur(105px) saturate(160%);opacity:.43;will-change:transform}.bg#bg1{animation:bgOne 15s ease-in-out infinite alternate}.bg#bg2{opacity:.22;mix-blend-mode:screen;animation:bgTwo 21s ease-in-out infinite alternate}.shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(100deg,#0002,#0009),radial-gradient(circle at 25% 50%,transparent 0 18%,#0003 65%)}
header{position:absolute;top:24px;left:28px;right:30px;display:flex;justify-content:space-between;align-items:flex-start}.live{display:flex;gap:7px;align-items:center;color:#ffffff73;font-size:10px}.live i{width:6px;height:6px;border-radius:50%;background:#30d158}.clock{text-align:right;line-height:1}.clock strong{display:block;font-size:34px;font-weight:480;letter-spacing:-1.7px;font-variant-numeric:tabular-nums}.clock span{display:block;margin-top:7px;font-size:10px;color:#ffffff8c}.clock small{display:block;margin-top:4px;font-size:9px;color:#ffffff59}
.player{width:min(1260px,calc(100% - 100px));height:100%;margin:auto;display:grid;grid-template-columns:minmax(360px,520px) minmax(0,1fr);gap:94px;align-items:center}.art-stage{position:relative;width:100%;aspect-ratio:1;perspective:1100px;animation:stage 8s ease-in-out infinite alternate}.art{position:absolute;inset:0;border-radius:26px;background:#171719 center/cover no-repeat}.art.main{overflow:hidden;box-shadow:0 42px 130px #000a,0 0 0 1px #ffffff10;animation:cover 10s cubic-bezier(.42,0,.58,1) infinite alternate;will-change:transform}.art.main span{height:100%;display:grid;place-items:center;font-size:60px;color:#ffffff1f}.art.blur{filter:blur(24px) saturate(155%);opacity:.55;transform:scale(1.06);animation:depth 8s ease-in-out infinite alternate}.halo{position:absolute;inset:-12%;border-radius:40%;background:#ffffff0d;filter:blur(45px);animation:halo 6s ease-in-out infinite}.glint{position:absolute;inset:0;border-radius:26px;background:linear-gradient(115deg,transparent 30%,#ffffff12 48%,transparent 63%);background-size:250% 100%;mix-blend-mode:screen;pointer-events:none;animation:glint 7s ease-in-out infinite}
.info{min-width:0}h1{margin:0;font-size:clamp(44px,5.2vw,74px);line-height:.99;letter-spacing:-.047em;font-weight:650;overflow-wrap:anywhere}h2{margin:14px 0 0;font-size:clamp(20px,1.8vw,25px);font-weight:500;color:#f5f5f7b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}p{margin:8px 0 0;font-size:13px;color:#f5f5f76b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline{margin-top:44px}.rail{position:relative;height:5px;background:#ffffff30;border-radius:99px;overflow:visible}.fill{position:absolute;inset:0 auto 0 0;width:0;background:#fff;border-radius:99px}.thumb{position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;background:white;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.timeline:hover .thumb{opacity:1}.times{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:#ffffff6e;font-variant-numeric:tabular-nums}.full{position:absolute;right:22px;bottom:20px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffff12;color:#ffffffb3;font-size:16px;backdrop-filter:blur(20px)}
@keyframes cover{0%{transform:translate3d(-7px,4px,0) scale(1.01) rotateZ(-.25deg)}35%{transform:translate3d(7px,-8px,0) scale(1.045) rotateZ(.28deg)}70%{transform:translate3d(-4px,-3px,0) scale(1.025) rotateZ(-.12deg)}100%{transform:translate3d(8px,6px,0) scale(1.055) rotateZ(.2deg)}}@keyframes depth{from{transform:scale(1.04) translate(-10px,8px)}to{transform:scale(1.13) translate(12px,-11px)}}@keyframes stage{from{transform:rotateX(.6deg) rotateY(-1deg) translateY(5px)}to{transform:rotateX(-.8deg) rotateY(1.2deg) translateY(-9px)}}@keyframes halo{0%,100%{transform:scale(.9);opacity:.25}50%{transform:scale(1.12);opacity:.65}}@keyframes glint{0%,20%{background-position:190% 0;opacity:.1}55%{opacity:.8}90%,100%{background-position:-90% 0;opacity:.08}}@keyframes bgOne{from{transform:scale(1.08) translate(-4%,-3%) rotate(-2deg)}to{transform:scale(1.22) translate(5%,4%) rotate(2deg)}}@keyframes bgTwo{from{transform:scale(1.2) translate(5%,-4%)}to{transform:scale(1.08) translate(-5%,5%)}}
@media(max-width:760px){header{top:16px;left:16px;right:16px}.clock strong{font-size:28px}.player{width:calc(100% - 34px);grid-template-columns:1fr;gap:30px;align-content:center}.art-stage{width:min(74vw,340px);margin:auto}h1{font-size:38px}.timeline{margin-top:30px}}
/* V5: stronger Apple-inspired living-artwork depth */
.art.ghost{inset:-3%;opacity:.22;filter:blur(9px) saturate(175%);transform:translateZ(-55px) scale(1.05);animation:ghostOrbit 7.5s ease-in-out infinite alternate;mix-blend-mode:screen}
.art.main{animation:coverV5 8.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.art.blur{animation:depthV5 7s ease-in-out infinite alternate}
@keyframes coverV5{
  0%{transform:translate3d(-10px,7px,30px) scale(1.015) rotateX(.5deg) rotateY(-1.3deg) rotateZ(-.3deg)}
  30%{transform:translate3d(9px,-10px,40px) scale(1.055) rotateX(-1deg) rotateY(1.5deg) rotateZ(.25deg)}
  62%{transform:translate3d(-6px,-4px,35px) scale(1.035) rotateX(.7deg) rotateY(.6deg) rotateZ(-.15deg)}
  100%{transform:translate3d(11px,8px,42px) scale(1.065) rotateX(-.5deg) rotateY(-1deg) rotateZ(.3deg)}
}
@keyframes depthV5{from{transform:translate3d(-15px,11px,-20px) scale(1.07)}to{transform:translate3d(16px,-14px,-20px) scale(1.17)}}
@keyframes ghostOrbit{from{transform:translate3d(15px,-10px,-55px) scale(1.07) rotate(-1deg)}to{transform:translate3d(-17px,13px,-55px) scale(1.13) rotate(1.2deg)}}
.clock small{display:none!important}

/* V6 — fixed physical album frame; animation happens only inside it */
.art-stage{animation:none!important;transform:none!important}
.coverFrame{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:#171719;box-shadow:0 42px 130px #000a,0 0 0 1px #ffffff10;transform:none!important}
.artInside{position:absolute;inset:-5%;background:#171719 center/cover no-repeat;will-change:transform}
.mainInside{z-index:3;animation:insideLivingArt 10s cubic-bezier(.45,0,.55,1) infinite alternate}
.mainInside span{height:100%;display:grid;place-items:center;font-size:60px;color:#ffffff1f}
.blurInside{z-index:1;filter:blur(18px) saturate(155%);opacity:.6;animation:insideDepth 8s ease-in-out infinite alternate}
.ghostInside{z-index:2;opacity:.20;mix-blend-mode:screen;filter:saturate(150%);animation:insideGhost 7s ease-in-out infinite alternate}
.glint{z-index:4}
@keyframes insideLivingArt{
  0%{transform:scale(1.06) translate3d(-1.8%,1.0%,0)}
  30%{transform:scale(1.13) translate3d(1.6%,-1.8%,0)}
  62%{transform:scale(1.09) translate3d(-1.0%,-.7%,0)}
  100%{transform:scale(1.15) translate3d(1.7%,1.2%,0)}
}
@keyframes insideDepth{from{transform:scale(1.10) translate(-2.2%,1.5%)}to{transform:scale(1.20) translate(2.3%,-1.8%)}}
@keyframes insideGhost{from{transform:scale(1.07) translate(1.7%,-1.2%)}to{transform:scale(1.16) translate(-1.8%,1.5%)}}
/* timezone/location line removed entirely */
.clock small{display:none!important}

/* V7 — keep almost the entire cover visible; motion comes from layers, not crop */
.mainInside{inset:-1.2%!important;animation:insideLivingArtV7 12s ease-in-out infinite alternate!important}
.blurInside{inset:-2%!important;opacity:.24!important;filter:blur(10px) saturate(145%)!important;animation:insideDepthV7 9s ease-in-out infinite alternate!important}
.ghostInside{inset:-1%!important;opacity:.12!important;filter:saturate(165%) contrast(108%)!important;animation:insideGhostV7 8s ease-in-out infinite alternate!important}
.coverFrame:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:
radial-gradient(circle at var(--lx,25%) var(--ly,30%),rgba(255,255,255,.12),transparent 27%),
linear-gradient(120deg,transparent 25%,rgba(255,255,255,.055) 48%,transparent 67%);
mix-blend-mode:screen;animation:lightTravel 11s ease-in-out infinite alternate}
@keyframes insideLivingArtV7{
0%{transform:scale(1.012) translate3d(-.25%,.18%,0)}
28%{transform:scale(1.022) translate3d(.35%,-.28%,0)}
57%{transform:scale(1.015) translate3d(-.18%,-.22%,0)}
100%{transform:scale(1.025) translate3d(.28%,.20%,0)}
}
@keyframes insideDepthV7{from{transform:scale(1.025) translate(-.5%,.35%)}to{transform:scale(1.04) translate(.55%,-.4%)}}
@keyframes insideGhostV7{from{transform:scale(1.01) translate(.55%,-.3%)}to{transform:scale(1.025) translate(-.55%,.38%)}}
@keyframes lightTravel{0%{--lx:18%;--ly:22%;opacity:.3}50%{--lx:70%;--ly:45%;opacity:.8}100%{--lx:42%;--ly:78%;opacity:.4}}

/* V8: virtually no crop; frame stays still, internal layers provide motion */
.mainInside{inset:-.35%!important;animation:livingV8 14s ease-in-out infinite alternate!important}
.blurInside{inset:-.65%!important;filter:blur(7px) saturate(150%)!important;opacity:.20!important;animation:depthV8 10s ease-in-out infinite alternate!important}
.ghostInside{inset:-.35%!important;opacity:.10!important;animation:ghostV8 9s ease-in-out infinite alternate!important}
@keyframes livingV8{
0%{transform:scale(1.003) translate(-.12%,.08%)}
25%{transform:scale(1.007) translate(.18%,-.13%)}
52%{transform:scale(1.004) translate(-.10%,-.10%)}
76%{transform:scale(1.008) translate(.12%,.14%)}
100%{transform:scale(1.004) translate(-.08%,.05%)}
}
@keyframes depthV8{from{transform:scale(1.008) translate(-.3%,.2%)}to{transform:scale(1.018) translate(.32%,-.22%)}}
@keyframes ghostV8{from{transform:scale(1.003) translate(.4%,-.25%)}to{transform:scale(1.012) translate(-.4%,.28%)}}
.coverFrame:before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:
linear-gradient(100deg,transparent 15%,rgba(255,255,255,.035) 40%,transparent 63%),
radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.055),transparent 38%);
mix-blend-mode:screen;animation:appleLightV8 9s ease-in-out infinite alternate}
@keyframes appleLightV8{from{transform:translateX(-8%);opacity:.35}to{transform:translateX(8%);opacity:.8}}