/* The main page as a DVD menu screen: a letterboxed 16:9 picture with the player's OSD in the
   black bars, the sleeve logo on its rule, a motion preview window, and a bottom menu row with
   the classic two-colour subpicture highlight. */

body[data-screen='menu'] { overflow: hidden; }
body[data-screen='menu'] .mast, body[data-screen='menu'] .fine { display: none; }

.menu { --lb: max(34px, calc((100vh - 56.25vw) / 2)); }
.menu.active {
  position: fixed; inset: 0; z-index: 10; padding: 0;
  display: grid; grid-template-rows: var(--lb) minmax(0, 1fr) var(--lb);
  animation: none;
}

/* ------------------------------------------------------------ letterbox + OSD */
.lbox {
  background: #000; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(14px, 3vw, 40px);
  font: 400 clamp(17px, 1.6vw, 24px)/1 var(--lcd); color: #3cff6a; letter-spacing: 1.5px;
  text-shadow: 0 0 6px rgba(60, 255, 106, 0.55);
  position: relative; z-index: 3;
}
.lbox.bottom { color: rgba(60, 255, 106, 0.6); text-shadow: none; }
.lbox b { font-weight: 400; background: #3cff6a; color: #000; padding: 0 5px; margin-right: 6px; text-shadow: none; }
.lbox i { font-style: normal; color: #fff; }
.lbox kbd { font: inherit; color: var(--lime); margin: 0 4px; }
.playglyph { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ------------------------------------------------------------ the picture */
.picture {
  position: relative; overflow: hidden; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'sleeve sleeve' 'blank preview' 'menu menu';
  padding: clamp(14px, 4.5vh, 48px) 0 0; /* title-safe top; sides handled per block */
  box-shadow: inset 0 0 120px rgba(0, 12, 40, 0.55);
}
.picture::after { /* phosphor bloom at the picture edge */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 30px 60px -30px rgba(255, 255, 255, 0.18);
}

/* sleeve: the logo sits on a rule that runs the full width, subtitle under it on the right */
.sleeve { grid-area: sleeve; padding: 0 0 0 clamp(18px, 5vw, 70px); }
.sleeve-logo {
  font: 700 clamp(40px, 8.6vw, 132px)/0.84 var(--wide); letter-spacing: -0.055em; color: var(--white);
  text-transform: lowercase; text-shadow: 0 0 26px rgba(255, 255, 255, 0.3);
  animation: logoIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.sleeve-rule { height: 2px; margin-top: 10px; background: var(--line); box-shadow: 0 0 12px rgba(200, 235, 255, 0.7); transform-origin: left; animation: ruleIn 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sleeve-sub {
  text-align: right; margin-top: 7px; padding-right: clamp(18px, 5vw, 70px);
  font: 400 clamp(10px, 1.15vw, 16px)/1.2 var(--exa); letter-spacing: 0.16em; text-transform: uppercase; color: var(--white);
  animation: fadeIn 0.8s 0.6s both;
}
@keyframes logoIn { from { opacity: 0; letter-spacing: 0.2em; filter: blur(14px); } }
@keyframes ruleIn { from { transform: scaleX(0); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ------------------------------------------------------------ motion preview window */
.preview { grid-area: preview; align-self: center; padding-right: clamp(18px, 5vw, 70px); min-width: 0; animation: fadeIn 0.8s 0.5s both; }
.pv-screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000;
  border: 3px solid rgba(245, 250, 255, 0.92); border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(4, 18, 48, 0.35), 0 26px 60px rgba(0, 16, 50, 0.55), 0 0 40px rgba(124, 198, 242, 0.35);
  transform: perspective(900px) rotateY(-7deg);
}
.pv-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
  mix-blend-mode: normal;
}
.pv { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; }
.pv.on { opacity: 1; }
.pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(1.15) contrast(1.05); }
.pv img.still { opacity: 1; animation: kenburns 14s ease-in-out infinite alternate; }
.pv.on img:not(.still) { animation: cycle 9s infinite; }
.pv.on img:nth-of-type(2) { animation-delay: 3s; }
.pv.on img:nth-of-type(3) { animation-delay: 6s; }
@keyframes cycle {
  0% { opacity: 0; transform: scale(1.08) translateX(2%); filter: saturate(1.2) hue-rotate(40deg) blur(3px); }
  4% { opacity: 1; filter: saturate(1.15) contrast(1.05); }
  30% { opacity: 1; transform: scale(1.02); }
  34%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.25) translate(-6%, 4%); } }
/* scenes: three tiles */
.pv.pv-scenes.on img:not(.still) { animation: none; opacity: 1; width: 33.4%; object-position: 30% 50%; }
.pv-scenes img:nth-of-type(2) { left: 33.3%; }
.pv-scenes img:nth-of-type(3) { left: 66.6%; }
.pv-tag {
  position: absolute; left: 10px; bottom: 9px; z-index: 2; padding: 3px 8px;
  font: 400 16px/1 var(--lcd); color: #000; background: var(--lime); letter-spacing: 1px;
}
.pv-tag.live { background: var(--red); color: #fff; }
/* downloads: an iridescent disc */
.pv-downloads { background: radial-gradient(ellipse at 50% 60%, #1c5fae, #061a3c); display: grid; place-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }
/* setup: colour bars */
.bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.bars i:nth-child(1) { background: #c0c0c0; } .bars i:nth-child(2) { background: #c0c000; } .bars i:nth-child(3) { background: #00c0c0; }
.bars i:nth-child(4) { background: #00c000; } .bars i:nth-child(5) { background: #c000c0; } .bars i:nth-child(6) { background: #c00000; } .bars i:nth-child(7) { background: #0000c0; }
.pv-caption {
  margin: 18px 0 0; padding: 10px 14px; max-width: 520px;
  font: 300 clamp(13px, 1.1vw, 15.5px)/1.5 var(--body); color: var(--white);
  background: linear-gradient(90deg, rgba(4, 18, 48, 0.6), rgba(4, 18, 48, 0.25)); border-left: 3px solid var(--lime);
}

/* ------------------------------------------------------------ bottom menu row with subpicture highlight */
.dvd-menu.main-row {
  grid-area: menu; flex-direction: row; justify-content: space-between; align-items: center; gap: 4px 10px;
  padding: clamp(10px, 2vh, 18px) clamp(18px, 5vw, 70px);
  background: linear-gradient(to top, rgba(2, 10, 30, 0.72), rgba(2, 10, 30, 0.38));
  border-top: 2px solid rgba(245, 250, 255, 0.85);
  animation: fadeIn 0.6s 0.8s both;
}
.dvd-menu.main-row a {
  border-radius: 0; padding: 6px 14px 6px 10px;
  font-size: clamp(13px, 1.32vw, 22px); white-space: nowrap; padding-inline: 10px 12px;
  text-shadow: 0 2px 10px rgba(0, 10, 40, 0.8);
}
.dvd-menu.main-row a.sel, .dvd-menu.main-row a:focus-visible {
  color: #000; text-shadow: none; background: var(--lime);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.dvd-menu.main-row a.sel::after, .dvd-menu.main-row a:focus-visible::after { display: none; }
.dvd-menu.main-row a.sel .cur, .dvd-menu.main-row a:focus-visible .cur { border-color: #000; background: transparent; }

/* ------------------------------------------------------------ idle screensaver: the bouncing logo */
.saver { position: fixed; inset: 0; z-index: 45; background: #000; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; cursor: none; }
body.saving .saver { opacity: 1; visibility: visible; }
.saver span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 700 clamp(26px, 4vw, 54px)/1 var(--wide); letter-spacing: -0.05em; color: var(--lime);
  padding: 10px 16px 14px; border-bottom: 3px solid currentColor;
  text-shadow: 0 0 20px currentColor;
}

/* ------------------------------------------------------------ portrait / narrow */
@media (max-width: 820px), (max-aspect-ratio: 4/3) {
  .menu { --lb: 38px; }
  .picture { grid-template-columns: 1fr; grid-template-areas: 'sleeve' 'preview' 'menu'; grid-template-rows: auto minmax(0, 1fr) auto; }
  .preview { padding: 18px clamp(18px, 5vw, 70px) 0; align-self: center; }
  .pv-screen { transform: none; max-height: 34vh; margin: 0 auto; }
  .pv-caption { margin-top: 12px; }
  .dvd-menu.main-row { flex-direction: column; align-items: stretch; gap: 2px; }
  .dvd-menu.main-row a { justify-content: flex-start; }
  .lbox { font-size: 15px; }
  .lbox.bottom .osd-row:first-child { display: none; }
}
@media (max-height: 520px) {
  .pv-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pv.on img:not(.still), .disc, .pv img.still, .playglyph { animation: none !important; }
  .pv.on img:first-of-type { opacity: 1; }
}
body.no-motion .pv.on img:not(.still), body.no-motion .disc, body.no-motion .pv img.still { animation: none !important; }
body.no-motion .pv.on img:first-of-type { opacity: 1; }

/* ------------------------------------------------------------ brand on the DVD screen */
.sleeve-logo { width: clamp(300px, 56vw, 900px); font-size: 0; animation: logoIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes logoIn { from { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(12px); } }
.saver span { padding: 0; border: 0; width: clamp(260px, 34vw, 520px); --hs-paper: currentColor; --hs-script: currentColor; }
.saver .wm svg { filter: drop-shadow(0 0 18px currentColor); }

/* the host: the raccoon stands in the picture, bottom left, over the lime blob */
.host {
  position: absolute; z-index: 2; left: clamp(10px, 3vw, 60px); bottom: calc(clamp(10px, 2vh, 18px) * 2 + clamp(14px, 1.6vw, 25px) + 14px);
  height: min(58%, 520px); aspect-ratio: 410 / 616; pointer-events: none;
  animation: fadeIn 0.8s 0.9s both;
}
.host img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; animation: hostBob 3.4s ease-in-out infinite; }
.host.hop img { animation: hostHop 0.42s cubic-bezier(0.3, 0.7, 0.4, 1), hostBob 3.4s 0.42s ease-in-out infinite; }
@keyframes hostBob { 50% { transform: translateY(-1.2%) rotate(-0.8deg); } }
@keyframes hostHop { 30% { transform: translateY(-6%) scaleY(1.03) rotate(1.5deg); } 60% { transform: translateY(0) scaleY(0.97); } }
/* cigar smoke from the tip (13% across, 41% down the sticker) */
.smoke { position: absolute; left: 12.6%; top: 40%; width: 0; height: 0; z-index: 3; }
.smoke i {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  animation: puff 3.6s ease-out infinite; opacity: 0;
}
.smoke i:nth-child(2) { animation-delay: 1.2s; }
.smoke i:nth-child(3) { animation-delay: 2.4s; }
@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-26px, -150px) scale(4.2); }
}
/* the picture keeps the preview clear of the host */
.preview { padding-left: 0; }
@media (max-width: 820px), (max-aspect-ratio: 4/3) {
  .host { left: auto; right: 8px; height: 22vh; bottom: auto; top: calc(var(--lb) + 8px); z-index: 4; }
  .sleeve-logo { width: min(62vw, 520px); }
  .sleeve-sub { text-align: left; max-width: 58%; padding: 0 0 0 clamp(18px, 5vw, 70px); line-height: 1.5; }
}
body.no-motion .host img, body.no-motion .smoke i { animation: none !important; }

/* ------------------------------------------------------------ secret gold: holographic foil on the host
   (after the "rare secret" card treatment: glitter + gold bands + brushed metal, colour-dodged,
   masked to the sticker; --posx/--posy/--mx/--my/--hyp follow the pointer or an idle sweep) */
.host { perspective: 700px; }
.foil-card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --posx: 50%; --posy: 50%; --hyp: 0.3;
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(var(--rx)) rotateX(var(--ry)); transition: transform 0.12s ease-out;
}
.host .foil-card > img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; }
.host .foil-card > img, .host.hop .foil-card > img { animation: none; }
.host .foil-card { animation: hostBob 3.4s ease-in-out infinite; }
.host.hop .foil-card { animation: hostHop 0.42s cubic-bezier(0.3, 0.7, 0.4, 1), hostBob 3.4s 0.42s ease-in-out infinite; }
.foil, .foil-glare {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../img/brand/mascot-sticker.webp) center / contain no-repeat;
  mask: url(../img/brand/mascot-sticker.webp) center / contain no-repeat;
}
.foil {
  --angle: 110deg;
  background-image:
    url(../img/brand/glitter.png),
    repeating-linear-gradient(var(--angle),
      rgba(89, 46, 80, 0.5) 0%, hsl(39, 37%, 60%) 2.5%, rgb(216, 183, 92) 5%, hsl(39, 37%, 60%) 7.5%,
      rgba(14, 21, 46, 0.5) 10%, rgba(14, 21, 46, 0.5) 15%),
    url(../img/brand/metal.png);
  background-size: 22% auto, 600% 100%, 60% auto;
  background-position: center, var(--posx) var(--posy), center;
  background-blend-mode: color-burn, darken;
  filter: brightness(calc((var(--hyp) * 0.6) + 1.4)) contrast(3.4) saturate(1);
  mix-blend-mode: color-dodge;
  opacity: 1;
}
.foil::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    url(../img/brand/glitter.png),
    repeating-linear-gradient(var(--angle),
      rgba(89, 46, 80, 0.5) 0%, hsl(39, 37%, 60%) 2.5%, rgb(216, 183, 92) 5%, hsl(39, 37%, 60%) 7.5%,
      rgba(14, 21, 46, 0.5) 10%, rgba(14, 21, 46, 0.5) 15%);
  background-size: 22% auto, 600% 100%;
  background-position: center, calc(var(--posx) * -1) calc(var(--posy) * -1);
  filter: brightness(calc((var(--hyp) * 0.5) + 1.3)) contrast(3) saturate(1);
  mix-blend-mode: exclusion;
}
.foil-glare {
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.55) 22%, rgba(0, 0, 0, 0.5) 90%);
  mix-blend-mode: overlay; opacity: calc(0.35 + var(--hyp) * 0.5);
}
body.no-motion .foil-card { animation: none !important; }