/*
Theme Name: Megashuffle
Theme URI: https://megashuffle.com
Author: Shuffle Muse for Stephen Benedek
Description: Custom theme for MEGASHUFFLE.com — two-format internet radio (Alternative Rock Variety Megashuffle + The EDM Megashuffle). Animated steampunk plate logo header: MEGA blinks red neon, the SHUFFLE plates fly into place, the .com plates rise in last. Full-width one-column layout built for Gutenberg blocks and custom HTML blocks.
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: megashuffle
Tags: one-column, custom-menu, custom-logo, featured-images, responsive
*/

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#111111;background:#ffffff;line-height:1.55;font-size:17px}
img{max-width:100%;height:auto}
a{color:#b30d20}
a:hover{text-decoration:underline}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;background:#fa243c;color:#fff;padding:10px 16px;z-index:200;border-radius:8px;font-weight:700}

/* ---------- Header + animated logo stage ---------- */
.site-header{background:radial-gradient(120% 130% at 50% 0%,#1b1b1e 0%,#0b0b0c 70%);padding:22px 12px 0;text-align:center}
.ms-stage{position:relative;display:block;width:min(430px,92vw);aspect-ratio:1/1;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid #3a3a3c;box-shadow:0 18px 50px rgba(0,0,0,.6);text-decoration:none}
.ms-stage img{position:absolute;display:block}
.ms-base{inset:0;width:100%;height:100%;filter:brightness(.38)}
.ms-stage.ms-play .ms-base{animation:ms-brighten .8s ease 2.15s both}
@keyframes ms-brighten{from{filter:brightness(.38)}to{filter:brightness(1)}}
.ms-mega{inset:0;width:100%;height:100%;clip-path:inset(5.7% .4% 52.5% 2.1%);-webkit-mask-image:linear-gradient(180deg,transparent,black 14%,black 86%,transparent);mask-image:linear-gradient(180deg,transparent,black 14%,black 86%,transparent);filter:brightness(1.18) saturate(1.35);animation:ms-neon 4.2s linear infinite}
@keyframes ms-neon{0%{opacity:.5}8%{opacity:.34}10%{opacity:.55}46%{opacity:.48}50%{opacity:.08}54%{opacity:.55}58%{opacity:.16}62%{opacity:.55}100%{opacity:.42}}
.ms-plate{opacity:0}
.ms-stage.ms-play .ms-plate{animation:ms-fly .6s cubic-bezier(.2,1.35,.4,1) both,ms-plate-out .5s ease 2.7s forwards}
@keyframes ms-plate-out{to{opacity:0}}
.p-s {left:.857%;top:50%;width:19.857%;--dx:-380px;--dy:-150px;--rot:-18deg;animation-delay:.15s,2.7s}
.p-h {left:20.714%;top:51.786%;width:10.714%;--dx:340px;--dy:-240px;--rot:14deg;animation-delay:.27s,2.7s}
.p-u1{left:31.429%;top:50%;width:14%;--dx:-150px;--dy:-380px;--rot:10deg;animation-delay:.39s,2.7s}
.p-u2{left:31.429%;top:79.643%;width:7.714%;--dx:-150px;--dy:-380px;--rot:10deg;animation-delay:.39s,2.7s}
.p-f1{left:45.429%;top:50.714%;width:15.643%;--dx:270px;--dy:270px;--rot:-14deg;animation-delay:.51s,2.7s}
.p-f2{left:61.071%;top:49.643%;width:12.071%;--dx:-330px;--dy:220px;--rot:16deg;animation-delay:.63s,2.7s}
.p-l {left:73.143%;top:51.786%;width:12.143%;--dx:310px;--dy:-180px;--rot:-12deg;animation-delay:.75s,2.7s}
.p-e {left:85.286%;top:52.857%;width:13.857%;--dx:-240px;--dy:310px;--rot:18deg;animation-delay:.87s,2.7s}
.c-c {left:35%;top:79.286%;width:12.143%;--dx:0px;--dy:420px;--rot:0deg;animation-delay:1.45s,2.7s}
.c-o {left:46.429%;top:81.071%;width:9.286%;--dx:0px;--dy:420px;--rot:0deg;animation-delay:1.57s,2.7s}
.c-m {left:54.857%;top:80.357%;width:12.286%;--dx:0px;--dy:420px;--rot:0deg;animation-delay:1.69s,2.7s}
@keyframes ms-fly{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.12)}to{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}}
.ms-tagline{color:#aeaeb2;font-size:12px;letter-spacing:5px;font-weight:700;margin:14px 0 0;text-transform:uppercase}

/* ---------- Main navigation ---------- */
.main-nav{margin:18px -12px 0;background:#161617;border-top:2px solid #fa243c}
.menu-toggle{display:none;background:none;border:0;color:#f5f5f7;font-size:17px;font-weight:700;padding:14px 18px;cursor:pointer;width:100%;text-align:center;letter-spacing:1px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
.main-nav li{position:relative}
.main-nav a{display:block;color:#f5f5f7;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:1px;padding:14px 20px;text-transform:uppercase}
.main-nav a:hover{color:#fa243c;text-decoration:none}
.main-nav .sub-menu{display:none;position:absolute;left:0;top:100%;background:#1d1d1f;min-width:260px;z-index:100;box-shadow:0 14px 30px rgba(0,0,0,.45);border-top:2px solid #fa243c}
.main-nav .sub-menu a{text-transform:none;letter-spacing:0;font-size:15px;padding:12px 18px}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{display:block}
@media(max-width:760px){
  .menu-toggle{display:block}
  .main-nav ul{display:none;flex-direction:column;text-align:left}
  .main-nav.open ul{display:flex}
  .main-nav .sub-menu{position:static;display:block;box-shadow:none;border-top:0;background:#1d1d1f}
  .main-nav .sub-menu a{padding-left:36px}
}

/* ---------- Content ---------- */
.site-main{max-width:1200px;margin:0 auto;padding:10px 16px 30px}
.entry-title{font-size:32px;line-height:1.15;margin:22px 0 10px;font-weight:800}
.entry-content{overflow-wrap:break-word}
.entry-content h2{font-size:26px;margin:26px 0 10px}
.entry-content h3{font-size:21px;margin:22px 0 8px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{max-width:100%}
.wp-block-image img{border-radius:6px}
.post-navigation{margin:26px 0;font-weight:700}

/* ---------- Footer ---------- */
.site-footer{background:#0d0d0f;color:#aeaeb2;text-align:center;padding:28px 16px 34px;margin-top:10px}
.site-footer .f-name{color:#f5f5f7;font-weight:800;letter-spacing:2px;font-size:18px}
.site-footer .f-tag{font-size:12px;letter-spacing:4px;margin-top:6px;text-transform:uppercase}
.site-footer .f-copy{font-size:13px;margin-top:12px;color:#8e8e93}
.back-to-top{display:inline-block;margin-top:14px;color:#f5f5f7;background:#fa243c;border-radius:999px;padding:9px 20px;font-weight:700;font-size:14px;text-decoration:none}
.back-to-top:hover{text-decoration:none;background:#d40f24}

/* ---------- Reduced motion ---------- */
/* v1.0.1: the logo animation is the site's signature and the owner asked for
   it to play everywhere, so it is NOT disabled by OS reduce-motion settings
   (Windows "animation effects off" was suppressing it on desktop). */