* { box-sizing: border-box; margin: 0; padding: 0; }
body { height: 100vh; background: #000; color: #fff; font-family: Outfit, system-ui, sans-serif; overflow: hidden; }

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 22px 16px; text-align: center; pointer-events: none;
  font-family: Anton, sans-serif; font-size: clamp(1rem, 2.4vw, 1.4rem); letter-spacing: .5em; text-transform: uppercase;
  text-shadow: 0 2px 12px #000;
}
header small { display: block; font-family: Outfit, sans-serif; font-size: .7rem; letter-spacing: .3em; opacity: .7; margin-top: 4px; }

.select { display: flex; height: 100vh; }

.panel {
  --a: #fff; --b: #000;
  position: relative; flex: 1; overflow: hidden; text-decoration: none; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 5vw 9vh;
  background: radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--a) 45%, #000), var(--b) 70%);
  transition: flex .6s cubic-bezier(.7,0,.2,1), filter .5s;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); margin: 0 -2.2%;
  animation: rise .9s cubic-bezier(.2,.8,.2,1) both;
}
.panel:nth-child(2) { animation-delay: .12s; }
.panel:nth-child(3) { animation-delay: .24s; }
.panel:first-child { clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); margin-left: 0; }
.panel:last-child  { clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; }
@keyframes rise { from { transform: translateY(100%); } }

/* Hovered panel grows, the others fade back */
.select:hover .panel, .select:focus-within .panel { filter: grayscale(.85) brightness(.45); }
.select .panel:hover, .select .panel:focus-visible { flex: 2.6; filter: none; outline: none; }

/* Moving speed-lines */
.panel::before {
  content: ""; position: absolute; inset: -50%; opacity: .12;
  background: repeating-linear-gradient(100deg, #fff 0 2px, transparent 2px 60px);
  animation: lines 14s linear infinite;
}
@keyframes lines { to { transform: translateX(120px); } }

/* Scenery backgrounds, tinted by the panel gradient underneath */
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: brightness(.45); transition: opacity .6s, filter .6s; }
.panel:hover .bg, .panel:focus-visible .bg { opacity: .8; filter: brightness(.7); }
.pan { animation: pan 24s ease-in-out infinite alternate; }
@keyframes pan { from { transform: scale(1.1) translateX(-4%); } to { transform: scale(1.25) translateX(4%); } }
.ship { object-position: 30% 50%; transform-origin: 50% 80%; animation: bob 5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: scale(1.12) translateY(0) rotate(-1deg); }
  50%      { transform: scale(1.12) translateY(-12px) rotate(1deg); }
}
.waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%; opacity: .45;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60'%3E%3Cpath d='M0 30 Q50 0 100 30 T200 30 T300 30 T400 30 V60 H0Z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E") repeat-x 0 0 / 400px 60px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='50'%3E%3Cpath d='M0 25 Q37 0 75 25 T150 25 T225 25 T300 25 V50 H0Z' fill='%231a5fa8' fill-opacity='.8'/%3E%3C/svg%3E") repeat-x 0 20px / 300px 50px,
    linear-gradient(transparent 60px, #0e3d73 100px);
  animation: waves 8s linear infinite;
}
@keyframes waves { to { background-position: 400px 0, -300px 20px, 0 0; } }

/* Konoha leaves drifting down */
.leaves i { position: absolute; top: -10%; font-style: normal; font-size: 1.6rem; animation: fall 9s linear infinite; }
.leaves i:nth-child(1) { left: 10%; }
.leaves i:nth-child(2) { left: 30%; animation-delay: -2s; animation-duration: 11s; font-size: 1.2rem; }
.leaves i:nth-child(3) { left: 50%; animation-delay: -5s; }
.leaves i:nth-child(4) { left: 70%; animation-delay: -7s; animation-duration: 12s; font-size: 1.1rem; }
.leaves i:nth-child(5) { left: 85%; animation-delay: -3s; animation-duration: 10s; }
.leaves i:nth-child(6) { left: 40%; animation-delay: -8s; animation-duration: 13s; font-size: 1.4rem; }
@keyframes fall {
  25% { transform: translate(30px, 30vh) rotate(90deg); }
  50% { transform: translate(-20px, 60vh) rotate(200deg); }
  75% { transform: translate(25px, 85vh) rotate(290deg); }
  100% { transform: translate(-10px, 115vh) rotate(380deg); }
}

/* Giant Japanese watermark */
.kanji {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
  font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 19vh; line-height: 1;
  writing-mode: vertical-rl; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.18);
  transition: transform .8s cubic-bezier(.7,0,.2,1), -webkit-text-stroke-color .5s;
}
.panel:hover .kanji, .panel:focus-visible .kanji { transform: translate(-50%, -55%) scale(1.15); -webkit-text-stroke-color: rgba(255,255,255,.35); }

/* Leader character in the background: soft-edged mask hides card frame and SAMPLE stamp */
.leader {
  position: absolute; top: 5vh; left: 50%; height: 125%; max-width: none; translate: -50% 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 26% at 50% 24%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 26% at 50% 24%, #000 35%, transparent 100%);
  opacity: .75; transform-origin: 50% 25%;
  transition: opacity .6s, scale .8s cubic-bezier(.7,0,.2,1);
  animation: kenburns 16s ease-in-out infinite alternate;
}
.panel:hover .leader, .panel:focus-visible .leader { opacity: 1; scale: 1.12; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0) rotate(0deg); }
  to   { transform: scale(1.12) translate(-3%, 2%) rotate(-1.5deg); }
}
.leader.cutout { top: 10vh; height: 55%; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 0 40px var(--a)); }

.name {
  position: relative; font-family: Anton, sans-serif; text-transform: uppercase; line-height: .9;
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  text-shadow: 4px 4px 0 var(--b), 0 0 40px var(--a);
}
.info {
  position: relative; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .5s .1s;
}
.panel:hover .info, .panel:focus-visible .info { max-height: 120px; opacity: 1; }
.info p { margin: 10px 0 18px; font-size: 1.05rem; opacity: .85; }
.info span {
  display: inline-block; padding: 12px 26px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; font-size: .85rem;
  background: #fff; color: var(--b); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.pokemon { --a: #ffcb05; --b: #0f2a6b; }
.onepiece { --a: #e8343f; --b: #2a0408; }
.naruto { --a: #ff8a00; --b: #1a0b00; }

/* Phone: stacked rows, info always visible */
@media (max-width: 700px) {
  body { overflow: auto; }
  .select { flex-direction: column; height: 100dvh; padding-top: 72px; }
  .panel, .panel:first-child, .panel:last-child { clip-path: none; margin: 0; padding: 0 16px 24px; }
  .select:hover .panel { filter: none; }
  .select .panel:hover { flex: 1; }
  .panel { min-height: 0; }
  .leader { top: 0; left: auto; right: -10%; translate: none; height: 160%; }
  .leader.cutout { top: 10%; right: 0; height: 80%; }
  .info { max-height: none; opacity: 1; }
  .info p { margin: 4px 0 0; } .info span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } .bg { transform: scale(1.12); } }