/* =====================================================
   ===== STRYV4 HOMEPAGE CARD · WHAT'S THAT ARTICLE   =====
   ===== v1 · Tag: STR                                =====
   ===== file: card-whats-that-article_STR.css        =====
   ===================================================== */

/* CodeNumber 0.1 — Frame guarantee (in case core-canvas is late/absent) */
.hp-postcard-canvas.card-whats-that-article {
  width: 100%;
  max-width: 1536px;
  height: 512px;
}



/* CodeNumber 1.1 — Reset + font face */
.card-whats-that-article *,
.card-whats-that-article *::before,
.card-whats-that-article *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
@font-face {
  font-family: 'Pokemon Solid';
  src: url('https://stryv4.co.uk/wp-content/themes/twentytwentyfive-child/fonts/pokemonsolid.ttf') format('truetype');
}
.card-whats-that-article { background: #8a1220; }
.card-whats-that-article .hp-postcard-content { overflow: hidden; }

/* CodeNumber 2.1 — Red background + rotating ray frames */
.wta-red-bg { position: absolute; inset: 0; z-index: 1; }
.wta-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform-origin: 100% 100%; visibility: hidden; }
.wta-beam { position: absolute; bottom: 0; right: 0; transform-origin: 50% 100%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.wta-frame:nth-child(1){animation:rf1 4s steps(1) infinite}.wta-frame:nth-child(2){animation:rf2 4s steps(1) infinite}.wta-frame:nth-child(3){animation:rf3 4s steps(1) infinite}.wta-frame:nth-child(4){animation:rf4 4s steps(1) infinite}.wta-frame:nth-child(5){animation:rf5 4s steps(1) infinite}.wta-frame:nth-child(6){animation:rf6 4s steps(1) infinite}.wta-frame:nth-child(7){animation:rf7 4s steps(1) infinite}.wta-frame:nth-child(8){animation:rf8 4s steps(1) infinite}.wta-frame:nth-child(9){animation:rf9 4s steps(1) infinite}.wta-frame:nth-child(10){animation:rf10 4s steps(1) infinite}.wta-frame:nth-child(11){animation:rf11 4s steps(1) infinite}.wta-frame:nth-child(12){animation:rf12 4s steps(1) infinite}.wta-frame:nth-child(13){animation:rf13 4s steps(1) infinite}
@keyframes rf1{0%{visibility:visible}7.69%{visibility:hidden}}@keyframes rf2{7.69%{visibility:visible}15.38%{visibility:hidden}}@keyframes rf3{15.38%{visibility:visible}23.08%{visibility:hidden}}@keyframes rf4{23.08%{visibility:visible}30.77%{visibility:hidden}}@keyframes rf5{30.77%{visibility:visible}38.46%{visibility:hidden}}@keyframes rf6{38.46%{visibility:visible}46.15%{visibility:hidden}}@keyframes rf7{46.15%{visibility:visible}53.85%{visibility:hidden}}@keyframes rf8{53.85%{visibility:visible}61.54%{visibility:hidden}}@keyframes rf9{61.54%{visibility:visible}69.23%{visibility:hidden}}@keyframes rf10{69.23%{visibility:visible}76.92%{visibility:hidden}}@keyframes rf11{76.92%{visibility:visible}84.62%{visibility:hidden}}@keyframes rf12{84.62%{visibility:visible}92.31%{visibility:hidden}}@keyframes rf13{92.31%{visibility:visible}100%{visibility:hidden}}
.wta-burst { position: absolute; width: 0; height: 0; top: 50%; left: 42%; z-index: 2; }
.wta-s { position: absolute; top: 0; left: 0; transform-origin: 50% 0%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.wta-pin { clip-path: polygon(50% 0%, 44% 100%, 56% 100%); background: #fff; }
.wta-sb{background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0.9) 8%,rgba(150,180,220,0.85) 25%,rgba(120,155,210,0.7) 48%,rgba(100,140,200,0.35) 76%,transparent 100%)}
.wta-sd{background:linear-gradient(to bottom,rgba(255,255,255,0.9) 0%,rgba(170,195,230,0.8) 6%,rgba(125,160,215,0.75) 20%,rgba(100,145,205,0.55) 45%,rgba(80,125,190,0.25) 74%,transparent 100%)}
.wta-r12{transform:rotate(12deg)}.wta-r22{transform:rotate(22.5deg)}.wta-r33{transform:rotate(33deg)}.wta-r45{transform:rotate(45deg)}.wta-r56{transform:rotate(56deg)}.wta-r67{transform:rotate(67.5deg)}.wta-r78{transform:rotate(78deg)}
.wta-fa{animation:wtaFa .1s steps(1) infinite}.wta-fb{animation:wtaFb .1s steps(1) infinite}
@keyframes wtaFa{0%{visibility:visible}50%{visibility:hidden}}@keyframes wtaFb{0%{visibility:hidden}50%{visibility:visible}}

/* CodeNumber 3.1 — Title */
.wta-title { position: absolute; z-index: 20; top: 40%; left: 88%; transform: translate(-50%, -50%) rotate(8deg); text-align: center; pointer-events: none; }
.wta-title-main { font-family: 'Pokemon Solid', 'Arial Black', Impact, sans-serif; font-size: 58px; color: #ffd740; text-shadow: -3px -3px 0 #1a5276, 3px -3px 0 #1a5276, -3px 3px 0 #1a5276, 3px 3px 0 #1a5276, 0 0 16px rgba(26,82,118,0.5); letter-spacing: 1px; line-height: 1.05; }
.wta-title-q { font-family: 'Pokemon Solid', 'Arial Black', Impact, sans-serif; font-size: 120px; color: #ffd740; text-shadow: -5px -5px 0 #1a5276, 5px -5px 0 #1a5276, -5px 5px 0 #1a5276, 5px 5px 0 #1a5276, 0 0 24px rgba(26,82,118,0.5); display: block; margin-bottom: 0; }

/* CodeNumber 4.1 — Carousel + article cards */
.wta-carousel { position: absolute; z-index: 15; top: 50%; left: 42%; transform: translate(-96px, -50%); display: flex; align-items: center; gap: 10px; }
.wta-article { width: 192px; height: 252px; border: none; border-radius: 0; overflow: visible; position: relative; cursor: pointer; transition: transform 0.4s, opacity 0.4s; flex-shrink: 0; text-decoration: none; display: block; background: transparent; box-shadow: none; outline: none; -webkit-tap-highlight-color: transparent; }
.wta-article:focus, .wta-article:focus-visible, .wta-article:active { outline: none; box-shadow: none; border: none; }
.wta-carousel.fading .wta-article { opacity: 0 !important; transition: opacity 0.3s ease-out; }
.wta-article-img { width: 100%; height: 100%; object-fit: contain; background: transparent; display: block; filter: grayscale(0.6) brightness(0.4) sepia(0.4) hue-rotate(180deg) saturate(1.5); transition: filter 0.35s ease; }
.wta-article:hover .wta-article-img { filter: grayscale(0) brightness(1) sepia(0) hue-rotate(0deg) saturate(1); }
.wta-article:hover { box-shadow: none; }
.wta-article.wta-bg { transform: scale(0.75); opacity: 0.5; margin-left: -20px; }
.wta-article.wta-bg:hover { opacity: 0.75; }
.wta-article.wta-main { transform: scale(1); opacity: 1; z-index: 2; }
.wta-carousel-header { position: absolute; z-index: 16; left: 42%; transform: translateX(-96px); top: 28px; font-family: 'Pokemon Solid', 'Arial Black', Impact, sans-serif; font-size: 28px; color: #ffd740; text-shadow: -2px -2px 0 #1a5276, 2px -2px 0 #1a5276, -2px 2px 0 #1a5276, 2px 2px 0 #1a5276, 0 0 10px rgba(26,82,118,0.4); pointer-events: none; white-space: nowrap; }
.wta-carousel-selected { position: absolute; z-index: 16; left: 42%; transform: translateX(-96px); bottom: 28px; font-family: 'Pokemon Solid', 'Arial Black', Impact, sans-serif; font-size: 22px; color: #fff; text-shadow: -2px -2px 0 #1a5276, 2px -2px 0 #1a5276, -2px 2px 0 #1a5276, 2px 2px 0 #1a5276, 0 0 8px rgba(0,0,0,0.5); pointer-events: none; white-space: nowrap; transition: opacity 0.3s ease; }
.wta-carousel-selected.fading { opacity: 0; }

/* CodeNumber 5.1 — Buttons, characters, logo */
.wta-btn { position: absolute; z-index: 25; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; }
.wta-btn:hover { background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.6); }
.wta-btn svg { width: 18px; height: 18px; fill: rgba(255,255,255,0.7); }
.wta-btn:hover svg { fill: #fff; }
.wta-btn-sound { bottom: 14px; left: 14px; }
.wta-btn-credits { bottom: 14px; left: 58px; }
.wta-characters { position: absolute; z-index: 18; bottom: 0; left: 10px; height: 80%; pointer-events: none; }
.wta-pokemon-logo { position: absolute; z-index: 20; top: -20px; left: -16px; height: 112px; pointer-events: none; opacity: 0.85; }

/* CodeNumber 6.1 — Credits overlay */
.wta-credits-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: none; align-items: center; justify-content: center; border-radius: 16px; }
.wta-credits-overlay.active { display: flex; }
.wta-credits-box { background: rgba(15,20,35,0.85); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 28px 36px; max-width: 420px; color: #ccddef; font-family: sans-serif; position: relative; }
.wta-credits-box h3 { font-size: 18px; color: #ffd740; margin-bottom: 14px; font-weight: 700; }
.wta-credits-box p { font-size: 13px; line-height: 1.6; margin-bottom: 8px; color: #b0c4de; }
.wta-credits-box strong { color: #fff; }
.wta-credits-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.wta-credits-close:hover { color: #fff; }