/* Plezy desktop and mobile. The television uses its own entry point. */
:root{--bg:#06070c;--surface:#14131b;--pad:clamp(20px,3.2vw,56px);--tile:clamp(145px,14.5vw,230px);--purple:#9b70fb;--t2:#b3b1bf;--t3:#85818f}
html,body{background:#06070c}
.topbar{height:76px;gap:24px;padding:12px var(--pad);background:linear-gradient(180deg,#07070be8,#07070b52,transparent);align-items:center}
.topbar.solid{background:#09090eeF;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff0d}
.web-brand{display:flex;align-items:center;gap:10px;flex:none;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.04em}.web-brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d8b4fe48;border-radius:23%;background:url("icon.svg?v=20261115-logo") center/cover no-repeat;color:transparent;font-size:0;box-shadow:0 6px 22px #8b5cf66b}.web-brand>span:last-child{background:linear-gradient(135deg,#fff 35%,#e9d5ff 75%,#c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-p{background:url("icon.svg?v=20261115-logo") center/cover no-repeat!important;color:transparent!important;font-size:0!important;border-radius:23%!important;box-shadow:0 4px 14px #8b5cf666}
.nav{flex:0 1 auto;margin:auto;gap:3px;align-items:center;overflow:visible;background:#101016c9;border:1px solid #ffffff0d;border-radius:999px;padding:4px}.nav button{padding:10px 16px;color:#b9b7c0;font-size:13px;font-weight:600}.nav button.active{color:#fff;background:linear-gradient(135deg,#b394ff,#8243ef);box-shadow:0 3px 18px #9f63ff70}.nav button:hover{color:#fff}
.web-header-actions{display:flex;align-items:center;gap:10px}.web-search,.web-header-actions .icon-btn,.web-header-actions .avatar{height:39px;border:1px solid #ffffff12;background:#17171dbb;border-radius:11px;color:#dedbe4}.web-search{display:flex;align-items:center;gap:8px;padding:0 13px;color:#aaa6b2;font-size:13px}.web-search svg,.web-header-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.web-header-actions .avatar{width:39px;min-width:39px;display:grid;place-items:center;background:linear-gradient(135deg,#2c2146,#15121c);color:#d6c4ff;font-weight:800}.web-header-actions .icon-btn{width:39px;min-width:39px;display:grid;place-items:center}
.hero-backdrop{height:min(92vh,760px);background:#0d0b11}.hero-backdrop img{object-position:center}.grad-left{background:linear-gradient(90deg,#08080be8 0%,#08080b9e 35%,#08080b22 70%)}.grad-bottom{background:linear-gradient(0deg,#06070c 0%,#06070c88 22%,transparent 65%)}
.billboard{min-height:min(92vh,760px);max-width:min(720px,100%);padding:150px var(--pad) 100px;gap:14px;justify-content:center}.bb-tag{color:#d8c8ff;font-size:12px;letter-spacing:.18em}.bb-tag .brand-p{color:#ab72ff}.bb-title{font-size:clamp(44px,6vw,86px);line-height:.98;letter-spacing:-.055em;text-shadow:0 4px 30px #0009}.bb-logo{max-width:480px;max-height:170px}.bb-meta{font-size:13px;color:#ddd}.bb-overview{max-width:570px;line-height:1.55;color:#e5e2ea;font-size:15px}.bb-buttons{margin-top:8px;gap:10px}.bb-buttons .btn{border-radius:9px;min-width:175px;height:48px;font-size:14px}.bb-buttons .btn-grey{background:#37343ecf;border:1px solid #ffffff26}.bb-callout{order:0;border-left:3px solid #a665f6;padding:13px 17px;border-radius:9px;background:#14101bba;border-top:1px solid #ffffff10;border-right:1px solid #ffffff10;border-bottom:1px solid #ffffff10;color:#eee;max-width:550px}.bb-rating{display:none}.hero-dots{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);display:flex;gap:9px;justify-content:center}.hero-dot{width:10px;height:10px;border-radius:99px;background:#ffffff65;font-size:0}.hero-dot.active{width:32px;background:white;box-shadow:0 0 12px #fff8}
#rows{position:relative;padding-bottom:60px}.row{margin-bottom:30px}.row-eyebrow{padding:0 var(--pad);margin:0 0 7px;color:#9e8dc5;font-size:11px;letter-spacing:.16em;font-weight:700}.row h2{font-size:clamp(23px,2vw,31px);letter-spacing:-.045em;font-weight:800;margin:0 0 15px}.row-track{gap:14px;padding:4px var(--pad) 14px}.row-arrow{top:5px;bottom:15px;background:#0c0c11cc;border-radius:8px}.tile{width:var(--tile);aspect-ratio:2/3;border-radius:12px;background:#17161d}.tile:hover,.tile:focus-visible{transform:scale(1.035);box-shadow:0 12px 35px #000b}.tile .t-name{padding:30px 12px 10px;font-size:13px}.tile img{object-fit:cover}.top10{width:clamp(250px,29vw,460px);height:clamp(220px,24vw,330px);border-radius:12px;overflow:hidden;background:#17151b}.top10 .poster{width:100%;height:100%;border-radius:12px}.top10 .poster img{object-fit:cover}.top10 .num{position:absolute;top:12px;left:18px;z-index:4;color:white;-webkit-text-stroke:0;font-size:78px;line-height:1;text-shadow:0 4px 20px #0009}.top10 .poster .t-name{position:absolute;inset:auto 0 0;z-index:3;padding:50px 18px 16px;text-align:left;font-size:18px;font-weight:750;background:linear-gradient(transparent,#06070ce8)}
.catalog-mode .hero-backdrop,.catalog-mode .billboard{display:none}.catalog-heading{display:flex;align-items:center;gap:15px;padding:105px var(--pad) 24px}.catalog-heading[hidden],.catalog-filters[hidden]{display:none}.catalog-heading h1{font-size:38px;line-height:1;letter-spacing:-.05em}.catalog-heading p{color:#9794a1;font-size:13px;margin-top:8px}.catalog-icon{display:grid;place-items:center;width:55px;height:55px;border-radius:15px;background:linear-gradient(135deg,#b799ff,#7636e7);box-shadow:0 8px 30px #6b39cc55;font-size:24px}.catalog-filters{margin:0 var(--pad) 24px;padding:7px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px solid #ffffff12;border-radius:13px;background:#101015}.catalog-filter,.catalog-select{min-height:39px;border-radius:9px;padding:0 15px;color:#aba8b2;font-size:13px;font-weight:650}.catalog-filter.active{background:linear-gradient(135deg,#ad8afd,#7d38e5);color:#fff;box-shadow:0 3px 18px #8c54f34d}.catalog-select{background:#1b1a22;color:#eee;border:1px solid #ffffff12;cursor:pointer}.catalog-grid,.search-box .grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding:0 var(--pad)}.catalog-grid .tile,.search-box .grid .tile{width:100%;min-width:0}.catalog-mode #rows .empty-row{margin:30px var(--pad);color:#a6a1b2}.catalog-mode .main-scroll:has(.billboard.hidden) #rows>.row:first-child{padding-top:0}.search-box{padding:115px var(--pad) 30px}.search-box input{max-width:100%;border-radius:12px;background:#15141c;border:1px solid #ffffff18}.search-box .grid{padding:0}.search-mode .hero-backdrop{display:none}
#screen-detail .detail-panel{background:#111019;border:1px solid #ffffff12;border-radius:18px}#screen-detail .detail-brand{display:inline-flex;align-items:center;gap:8px;color:#a274ff}#screen-detail .detail-brand::before{content:'';width:18px;height:18px;flex:none;background:url("icon.svg?v=20261115-logo") center/cover no-repeat;border-radius:23%;box-shadow:0 2px 10px #8b5cf655}#screen-detail .detail-progress span{background:#a274ff}#screen-detail .detail-play{border-radius:9px}#screen-detail .detail-round{border-radius:12px;border:1px solid #ffffff35}
@media(max-width:900px){.topbar{gap:12px}.nav{overflow-x:auto;max-width:62vw}.nav button{padding:9px 12px}.web-brand span:last-child{display:none}.web-search span{display:none}.web-search{padding:0 10px}.catalog-grid,.search-box .grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bb-overview{max-width:440px}}
@media(max-width:600px){:root{--tile:145px;--pad:18px}.topbar{height:auto;min-height:64px;flex-wrap:wrap;padding:10px var(--pad);gap:8px;background:#09090eeF}.web-brand{order:0}.web-header-actions{order:1;margin-left:auto}.nav{order:2;max-width:none;width:100%;flex:1 0 100%;justify-content:space-between;gap:0}.nav button{padding:9px 11px;font-size:12px}.billboard{padding:155px var(--pad) 95px;min-height:620px;justify-content:center}.hero-backdrop{height:620px}.bb-title{font-size:46px}.bb-overview{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.bb-buttons .btn{min-width:0;flex:1}.bb-buttons{display:flex;width:100%}.bb-callout{font-size:12px}.row h2{font-size:23px}.top10{width:245px;height:205px}.catalog-heading{padding-top:145px}.catalog-grid,.search-box .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.catalog-filters{gap:4px}.catalog-filter,.catalog-select{padding:0 9px;font-size:12px}.search-box{padding-top:155px}}

.hero-dot{min-height:0;min-width:0;padding:0;flex:none}
.catalog-mode .load-more{margin:28px var(--pad);border-radius:10px}

.billboard:has(.bb-logo:not([hidden])) .bb-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bb-buttons{order:1}
/* Catalogue: visual hierarchy and motion for the desktop and mobile interface. */
.pc-card{position:relative;flex:0 0 var(--tile);width:var(--tile);min-width:0;scroll-snap-align:start;animation:pc-card-appear .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--card-index,0) * 35ms)}
.pc-card .tile{width:100%;height:auto;display:block;aspect-ratio:2/3;border:1px solid #ffffff12;border-radius:14px;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.pc-card .tile:hover,.pc-card .tile:focus-visible{transform:translateY(-6px);border-color:#a78bfa99;box-shadow:0 10px 24px #0008,0 0 0 1px #a78bfa55}
.pc-card .tile .t-name{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;background:linear-gradient(transparent,#07070be8);padding:48px 12px 14px}
.pc-card:hover .t-name,.pc-card:focus-within .t-name,.show-titles .pc-card .t-name{opacity:1;transform:none}
.card-save{position:absolute;z-index:5;top:9px;right:9px;width:34px;height:34px;min-height:0;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:11px;background:#0b0b13c9;color:white;font-size:22px;line-height:1;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s,background .2s}
.pc-card:hover .card-save,.pc-card:focus-within .card-save,.trend-card:hover .card-save,.trend-card:focus-within .card-save{opacity:1;transform:none}.card-save:hover{background:#8b5cf6}.card-save[aria-pressed=true]{color:#d5b7ff}
.catalog-grid .pc-card,.search-box .grid .pc-card{width:100%;min-width:0}.catalog-grid .tile,.search-box .grid .tile{width:100%}
.catalog-titles{display:inline-flex;align-items:center;gap:8px;padding:0 12px;height:39px;border:1px solid #ffffff12;border-radius:10px;background:#101015;color:#c2bfca;font-size:12px;font-weight:650;cursor:pointer}.catalog-titles input{accent-color:#9a68f9;width:16px;height:16px}
.trends-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:0 var(--pad);margin-bottom:20px}.trends-heading .row-eyebrow,.trends-heading h2{padding:0;margin-left:0}.trends-heading h2{margin-bottom:0}.trends-filters{display:flex;gap:2px;background:#121218;border:1px solid #ffffff10;padding:4px;border-radius:12px}.trends-filter{min-height:36px;padding:0 16px;color:#9f9ba9;font-size:13px;font-weight:700;border-radius:9px}.trends-filter.active{background:linear-gradient(135deg,#a66dff,#733bd9);color:white;box-shadow:0 4px 15px #8546e566}
.trends-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 var(--pad);margin-bottom:16px}.trend-card{position:relative;min-width:0;aspect-ratio:1.14;border-radius:14px;overflow:hidden;background:#17151d;animation:pc-card-appear .5s cubic-bezier(.22,1,.36,1) both}.trend-card-main{position:absolute;inset:0;width:100%;height:100%;text-align:left;overflow:hidden;border:1px solid #ffffff12;border-radius:inherit;background:#17151d}.trend-card-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#07080df2 0%,#07080d88 34%,#07080d15 76%);pointer-events:none}.trend-card-main img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}.trend-card-main:hover img{transform:scale(1.035)}.trend-number{position:absolute;top:16px;left:20px;z-index:2;color:white;font-size:clamp(50px,6vw,76px);font-weight:900;line-height:1;letter-spacing:-.06em;text-shadow:0 2px 14px #0008}.trend-details{position:absolute;z-index:2;bottom:20px;left:20px;right:20px;display:flex;flex-direction:column;gap:5px}.trend-meta{font-size:11px;font-weight:800;letter-spacing:.08em;color:#ead893}.trend-details strong{font-size:19px;line-height:1.18}.trend-year{font-size:13px;color:#b4afbe}.trends-section .row-track{padding-top:0}.trends-section .row-wrap[hidden]{display:none}
.catalog-grid,.search-box .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@keyframes pc-card-appear{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.catalog-grid,.search-box .grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.catalog-grid,.search-box .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.catalog-grid,.search-box .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.trends-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.trend-card{aspect-ratio:.7}.trend-number{top:10px;left:10px;font-size:38px}.trend-details{left:9px;right:8px;bottom:10px;gap:3px}.trend-details strong{font-size:12px}.trend-meta,.trend-year{font-size:10px}.trends-heading{align-items:flex-start;flex-direction:column}.trends-filter{padding:0 12px}.card-save{opacity:1;transform:none;width:30px;height:30px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.pc-card,.trend-card{animation:none}.pc-card .tile,.pc-card .t-name,.card-save,.trend-card-main img{transition:none}.pc-card .tile:hover{transform:none}.trend-card-main:hover img{transform:none}}

/* Violet accents are scoped to the PC/mobile entry point. */
:root{--red:#9b70fb}
.profiles-brand .profiles-logo{display:inline-flex;align-items:center;gap:12px;color:#a777ff;text-shadow:0 2px 18px #9b70fb66}.profiles-brand .profiles-logo::before{content:'';width:1.15em;height:1.15em;flex:none;background:url("icon.svg?v=20261115-logo") center/cover no-repeat;border-radius:23%;box-shadow:0 6px 22px #8b5cf673}
.login-bg{background:radial-gradient(circle at 20% 20%,#9b70fb40,transparent 55%),radial-gradient(circle at 80% 80%,#6366f140,transparent 55%),var(--bg1)}
#screen-detail .detail-episode-progress i{background:#9b70fb}
#screen-player{--player-accent:#9b70fb}
#screen-player .language-pill.selected{background:#9b70fb;border-color:#9b70fb;color:#fff}
@media(prefers-reduced-motion:reduce){#screen-player .player-spinner{border-color:#9b70fb #ffffff35 #ffffff35}}
/* Rounded controls and translucent navigation, only for this PC/mobile entry point. */
.nav{position:relative;isolation:isolate;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(28,23,40,.48) 42%,rgba(9,9,16,.68));border:1px solid rgba(230,220,255,.18);box-shadow:0 8px 32px #0005,inset 0 1px 0 #ffffff35,inset 0 -1px 0 #ffffff0b;-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.nav:before{content:"";position:absolute;inset:1px 12% auto;height:45%;border-radius:999px;background:linear-gradient(180deg,#ffffff1b,transparent);pointer-events:none;z-index:-1}
.nav button{transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.nav button:hover{background:#ffffff16;transform:translateY(-1px)}
.nav button.active,.nav button.active:hover{background:linear-gradient(135deg,#bba1ff,#8a4df1);box-shadow:0 3px 18px #9f63ff70,inset 0 1px 0 #ffffff70}
.web-search,.web-header-actions .icon-btn,.web-header-actions .avatar{border-radius:999px;background:linear-gradient(135deg,#ffffff1c,#17141eb8);box-shadow:inset 0 1px 0 #ffffff26;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:background .2s,transform .2s,box-shadow .2s}
.web-search:hover,.web-header-actions .icon-btn:hover,.web-header-actions .avatar:hover{background:#ffffff2a;transform:translateY(-2px);box-shadow:0 8px 20px #0005,inset 0 1px 0 #ffffff35}
.bb-buttons .btn,#screen-detail .detail-play,#screen-detail .detail-trailer,.catalog-filter,.catalog-select,.catalog-titles,.modal-card .opt,.load-more,.login-card .btn{border-radius:999px;transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s,border-color .22s,box-shadow .22s}
.bb-buttons .btn{padding-inline:25px;box-shadow:inset 0 1px 0 #ffffff25}
.bb-buttons .btn-grey{background:linear-gradient(135deg,#ffffff36,#ffffff19);border:1px solid #ffffff35;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bb-buttons .btn:hover,#screen-detail .detail-play:hover,#screen-detail .detail-trailer:hover,.catalog-filter:hover,.modal-card .opt:hover{transform:translateY(-2px);box-shadow:0 8px 22px #0005}
.bb-buttons .btn:active,#screen-detail .detail-play:active,.catalog-filter:active,.modal-card .opt:active{transform:translateY(0) scale(.98)}
#screen-detail .detail-round,.card-save{border-radius:50%}
.catalog-filters,.trends-filters{border-radius:999px;background:linear-gradient(135deg,#ffffff12,#14121dba);box-shadow:inset 0 1px 0 #ffffff18;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.catalog-filter,.trends-filter{border-radius:999px}.catalog-filter.active,.trends-filter.active{box-shadow:0 4px 15px #8546e566,inset 0 1px 0 #ffffff66}
.modal-card{border:1px solid #ffffff1c;background:linear-gradient(145deg,#292438e8,#14131deF);box-shadow:0 24px 90px #0009,inset 0 1px 0 #ffffff26;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);animation:pc-modal-in .28s cubic-bezier(.22,1,.36,1) both}
#screen-detail:not([hidden]) .detail-panel{animation:pc-detail-in .32s cubic-bezier(.22,1,.36,1) both}
@keyframes pc-modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pc-detail-in{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:600px){.bb-buttons{flex-wrap:wrap}.bb-buttons .btn{flex:1 1 125px;min-width:0}.catalog-filters{border-radius:22px}.trends-filters{border-radius:999px}}
@media(prefers-reduced-motion:reduce){.nav button,.web-search,.web-header-actions .icon-btn,.web-header-actions .avatar,.bb-buttons .btn,#screen-detail .detail-play,#screen-detail .detail-trailer,.catalog-filter,.catalog-select,.catalog-titles,.modal-card .opt,.load-more,.login-card .btn{transition:none}.nav button:hover,.web-search:hover,.web-header-actions .icon-btn:hover,.web-header-actions .avatar:hover,.bb-buttons .btn:hover,#screen-detail .detail-play:hover,#screen-detail .detail-trailer:hover,.catalog-filter:hover,.modal-card .opt:hover{transform:none}.modal-card,#screen-detail:not([hidden]) .detail-panel{animation:none}}

/* The artwork belongs to the scrolling hero and each slide moves with it. */
.hero-viewport{position:relative;overflow:hidden;touch-action:pan-y}
.hero-stage{position:relative;width:100%;overflow:hidden;will-change:transform;border-radius:0;transition:border-radius .25s;isolation:isolate}
.hero-preview{position:absolute;inset:0 auto auto 0;pointer-events:none}
.hero-moving .hero-stage{border-radius:16px}
.hero-backdrop{overflow:hidden;isolation:isolate}
.hero-backdrop img{position:absolute;inset:0;will-change:transform,opacity}
.main-scroll:has(.billboard.hidden) .hero-backdrop{display:none}
.hero-viewport{cursor:grab}
.hero-dragging,.hero-dragging .billboard{cursor:grabbing;user-select:none}
.hero-dots{left:50%;z-index:3}
.hero-dot{transition:width .35s,background .35s,box-shadow .35s}

/* The featured artwork fills the viewport, including on tall displays. */
.hero-stage .hero-backdrop{height:100%}
.hero-stage .billboard:not(.hidden){min-height:100vh;min-height:100dvh}
.hero-stage .grad-bottom{height:100%;background:linear-gradient(0deg,#06070c 0%,#06070c8c 5%,#06070c2e 10%,transparent 18%)}
.hero-stage .grad-left{background:linear-gradient(90deg,#05050890 0%,#05050855 27%,transparent 62%)}


/* ===================== FLUID MOTION, LIQUID GLASS & MODERN WEB APIs ===================== */
:root {
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

/* 1. Below-the-fold deferred rendering (defer-rendering-heavy-content) */
#rows > .row:nth-child(n+3) {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 320px;
}

/* 2. Scroll-driven header & hero parallax (shrinking-header-on-scroll) */
.topbar {
  transition: background-color 260ms var(--ease-spring), height 260ms var(--ease-spring), box-shadow 260ms var(--ease-spring), border-color 260ms var(--ease-spring);
  view-transition-name: plezy-topbar;
}
.topbar.solid {
  height: 66px;
  background: linear-gradient(180deg, rgba(12, 11, 20, 0.86), rgba(9, 9, 15, 0.78));
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#mainScroll {
  scroll-timeline: --plezy-main-scroll block;
}
@keyframes plezy-topbar-scroll {
  from {
    height: 76px;
    background-color: rgba(7, 7, 11, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    height: 66px;
    background-color: rgba(10, 10, 17, 0.84);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}
@keyframes plezy-hero-parallax {
  from {
    translate: 0 0;
    scale: 1;
  }
  to {
    translate: 0 5%;
    scale: 1.045;
  }
}
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    .topbar {
      animation: plezy-topbar-scroll linear both;
      animation-timeline: --plezy-main-scroll;
      animation-range: 0px 110px;
    }
    .hero-stage .hero-backdrop img {
      animation: plezy-hero-parallax linear both;
      animation-timeline: --plezy-main-scroll;
      animation-range: 0px 640px;
    }
  }
}

/* 3. Discrete entry & exit transitions (@starting-style + allow-discrete + [data-closing] fallback) */
#modal {
  opacity: 1;
  transition: opacity 240ms var(--ease-spring), display 240ms;
  transition-behavior: allow-discrete;
}
#modal .modal-card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity 260ms var(--ease-spring), translate 260ms var(--ease-spring), scale 260ms var(--ease-spring);
}
@starting-style {
  #modal {
    opacity: 0;
  }
  #modal .modal-card {
    opacity: 0;
    translate: 0 16px;
    scale: 0.96;
  }
}
#modal[hidden],
#modal[data-closing] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-in-accelerate), display 180ms;
  transition-behavior: allow-discrete;
}
#modal[hidden] .modal-card,
#modal[data-closing] .modal-card {
  opacity: 0;
  translate: 0 10px;
  scale: 0.97;
  transition: opacity 180ms var(--ease-in-accelerate), translate 180ms var(--ease-in-accelerate), scale 180ms var(--ease-in-accelerate);
}

#screen-detail {
  opacity: 1;
  transition: opacity 280ms var(--ease-spring), display 280ms;
  transition-behavior: allow-discrete;
}
#screen-detail .detail-panel {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity 320ms var(--ease-spring), translate 320ms var(--ease-spring), scale 320ms var(--ease-spring);
}
@starting-style {
  #screen-detail {
    opacity: 0;
  }
  #screen-detail .detail-panel {
    opacity: 0;
    translate: 0 22px;
    scale: 0.975;
  }
}
#screen-detail[hidden],
#screen-detail[data-closing] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 210ms var(--ease-in-accelerate), display 210ms;
  transition-behavior: allow-discrete;
}
#screen-detail[hidden] .detail-panel,
#screen-detail[data-closing] .detail-panel {
  opacity: 0;
  translate: 0 14px;
  scale: 0.98;
  transition: opacity 210ms var(--ease-in-accelerate), translate 210ms var(--ease-in-accelerate), scale 210ms var(--ease-in-accelerate);
}

.search-box,
.catalog-heading,
.catalog-filters {
  opacity: 1;
  translate: 0 0;
  transition: opacity 280ms var(--ease-spring), translate 280ms var(--ease-spring), display 280ms;
  transition-behavior: allow-discrete;
}
@starting-style {
  .search-box,
  .catalog-heading,
  .catalog-filters {
    opacity: 0;
    translate: 0 12px;
  }
}
.search-box[hidden],
.catalog-heading[hidden],
.catalog-filters[hidden] {
  opacity: 0;
  translate: 0 -8px;
}

/* 4. Same-Document View Transitions (same-document-transitions) */
::view-transition-old(root) {
  animation: 220ms var(--ease-in-accelerate) both plezy-vt-fade-out;
}
::view-transition-new(root) {
  animation: 320ms var(--ease-spring) both plezy-vt-fade-in;
}
::view-transition-group(plezy-active-poster) {
  animation-duration: 380ms;
  animation-timing-function: var(--ease-spring);
  border-radius: 14px;
  overflow: clip;
}
@keyframes plezy-vt-fade-out {
  to {
    opacity: 0;
    scale: 0.992;
  }
}
@keyframes plezy-vt-fade-in {
  from {
    opacity: 0;
    scale: 1.008;
  }
}

/* 5. Liquid Glass Cards, Interactive Specular Highlights & Hero Pause Control */
.pc-card .tile {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform 360ms var(--ease-spring), border-color 280ms ease, box-shadow 320ms var(--ease-spring);
}
.pc-card .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 36%, transparent 65%);
  opacity: 0;
  transition: opacity 300ms var(--ease-spring);
  pointer-events: none;
}
.pc-card .tile:hover,
.pc-card .tile:focus-visible {
  transform: translateY(-7px) scale(1.035);
  border-color: rgba(186, 150, 255, 0.72);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.62), 0 0 24px rgba(155, 112, 251, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pc-card .tile:hover::after,
.pc-card .tile:focus-visible::after {
  opacity: 1;
}
.pc-card .tile img {
  transition: transform 520ms var(--ease-spring);
}
.pc-card .tile:hover img,
.pc-card .tile:focus-visible img {
  transform: scale(1.05);
}
.trend-card {
  transition: transform 380ms var(--ease-spring), box-shadow 380ms var(--ease-spring);
}
.trend-card:hover,
.trend-card:focus-within {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 26px rgba(155, 112, 251, 0.22);
}
.hero-dots {
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(16, 14, 24, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.hero-pause-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: transform 200ms var(--ease-spring), background-color 200ms ease;
}
.hero-pause-btn:hover,
.hero-pause-btn:focus-visible {
  background: rgba(155, 112, 251, 0.55);
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
  #modal,
  #modal .modal-card,
  #screen-detail,
  #screen-detail .detail-panel,
  .search-box,
  .catalog-heading,
  .catalog-filters,
  .pc-card .tile,
  .pc-card .tile img,
  .trend-card,
  .topbar {
    transition: none !important;
    animation: none !important;
  }
  .pc-card .tile:hover,
  .pc-card .tile:focus-visible,
  .pc-card .tile:hover img,
  .pc-card .tile:focus-visible img,
  .trend-card:hover,
  .trend-card:focus-within {
    transform: none !important;
  }
}