/* Micro Center guide, standalone spotlight page */

.mc-guide-page {
 min-height: 100vh;
 background: #12090b;
 color: #eef2f7;
}

.mc-guide-page.page-wrap {
 flex: 1;
 background: transparent;
}

.mc-guide-page main {
 flex: 1 0 auto;
 display: flex;
 flex-direction: column;
}

.mc-guide-page.mc-spotlight {
 flex: 1 0 auto;
}

.mc-guide-page.site-header {
 background: rgba(18, 9, 11, 0.92);
 border-bottom: 1px solid rgba(227, 24, 55, 0.15);
}

.mc-guide-page.footer {
 margin-top: auto;
 flex-shrink: 0;
 border-top: 1px solid rgba(227, 24, 55, 0.12);
}

/* Spotlight */
.mc-spotlight {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 padding: clamp(48px, 8vw, 88px) 20px clamp(56px, 9vw, 96px);
 background:
 radial-gradient(ellipse 70% 55% at 88% 8%, rgba(227, 24, 55, 0.22) 0%, transparent 56%),
 radial-gradient(ellipse 60% 50% at 8% 92%, rgba(196, 92, 58, 0.16) 0%, transparent 52%),
 linear-gradient(166deg, #1c1012 0%, #2a1418 42%, #12090b 100%);
}

.mc-spotlight::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(227, 24, 55, 0.32), transparent);
 pointer-events: none;
}

.mc-spotlight__glow {
 position: absolute;
 inset: auto 16% 6% 16%;
 height: 38%;
 z-index: 0;
 pointer-events: none;
 background: radial-gradient(ellipse at 50% 100%, rgba(227, 24, 55, 0.16), transparent 70%);
 filter: blur(20px);
}

.mc-spotlight__shell {
 position: relative;
 z-index: 1;
 max-width: 1180px;
 margin: 0 auto;
}

.mc-spotlight__grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
 gap: clamp(28px, 5vw, 56px);
 align-items: center;
}

.mc-spotlight__copy {
 text-align: left;
}

.mc-spotlight__kicker {
 margin: 0 0 10px;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: rgba(242, 168, 168, 0.95);
}

.mc-spotlight__title {
 margin: 0 0 16px;
 font-size: clamp(2.2rem, 5vw, 3.4rem);
 font-weight: 900;
 line-height: 1.06;
 letter-spacing: -0.02em;
 text-shadow: 0 2px 24px rgba(2, 4, 8, 0.35);
}

.mc-spotlight__lead {
 margin: 0 0 16px;
 max-width: 48ch;
 font-size: 1.08rem;
 line-height: 1.7;
 font-weight: 500;
 color: rgba(232, 238, 249, 0.88);
}

.mc-spotlight__note {
 margin: 0 0 28px;
 max-width: 48ch;
 font-size: 0.94rem;
 line-height: 1.65;
 font-weight: 500;
 color: rgba(232, 200, 196, 0.78);
 font-style: italic;
}

.mc-spotlight__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.mc-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 11px 20px;
 border-radius: 10px;
 border: 1px solid rgba(242, 168, 168, 0.35);
 background: linear-gradient(135deg, #d12a3c, #8a1624);
 color: #fff;
 font: inherit;
 font-weight: 700;
 text-decoration: none;
 cursor: pointer;
 transition: filter 0.2s ease, transform 0.2s ease;
}

.mc-btn:hover {
 filter: brightness(1.08);
 transform: translateY(-1px);
}

.mc-btn--ghost {
 background: rgba(18, 9, 11, 0.72);
 border-color: rgba(152, 186, 227, 0.28);
}

/* Media / flip */
.mc-spotlight__media {
 display: flex;
 flex-direction: column;
 gap: 0;
}

.mc-media {
 position: relative;
 margin: 0;
 border-radius: 18px;
 aspect-ratio: 16 / 9;
 background: #000;
 overflow: hidden;
 border: 1px solid rgba(227, 24, 55, 0.28);
 box-shadow:
 0 0 0 1px rgba(2, 4, 8, 0.25) inset,
 0 22px 50px rgba(2, 4, 8, 0.45);
}

.mc-flip {
 perspective: 1200px;
}

.mc-flip__controls {
 text-align: center;
 margin-top: 20px;
}

.mc-flip__btn {
 position: absolute;
 inset: 0;
 z-index: 1;
 display: block;
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 border: 0;
 background: none;
 color: inherit;
 cursor: pointer;
 border-radius: 18px;
 text-align: left;
 overflow: hidden;
}

.mc-flip__btn:focus-visible {
 outline: 2px solid rgba(242, 168, 168, 0.9);
 outline-offset: 4px;
}

.mc-flip__inner {
 position: relative;
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 transform-style: preserve-3d;
 transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
 border-radius: 18px;
}

.mc-flip.is-flipped.mc-flip__inner {
 transform: rotateY(180deg);
}

.mc-flip__face {
 position: absolute;
 inset: 0;
 overflow: hidden;
 border-radius: 18px;
 backface-visibility: hidden;
}

.mc-flip__face--back {
 transform: rotateY(180deg);
 background: #000;
}

.mc-flip__face img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.mc-flip__embed,
.mc-flip__embed iframe {
 width: 100%;
 height: 100%;
 display: block;
 border: 0;
}

@media (prefers-reduced-motion: reduce) {
.mc-flip__inner {
 transition: none;
 }
}

/* Fry's tombstone, section corner, never on the video */
.mc-frys {
 position: absolute;
 left: clamp(12px, 3vw, 24px);
 bottom: clamp(12px, 3vw, 20px);
 z-index: 3;
 padding: 0;
 border: 0;
 background: none;
 cursor: pointer;
 opacity: 0.88;
 overflow: visible;
 transition: opacity 0.25s ease, transform 0.2s ease;
}

.mc-spotlight:has(.mc-flip.is-flipped).mc-frys {
 opacity: 0;
 pointer-events: none;
 transform: translateY(8px);
}

.mc-frys__ghost {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 0;
 font-size: 1.65rem;
 line-height: 1;
 pointer-events: none;
 opacity: 0;
 transform: translate(-50%, -50%) scale(0.55);
 filter: blur(2px);
 will-change: transform, opacity, filter;
}

.mc-frys__ghost.is-rising {
 animation: mc-frys-ghost-rise 2.2s ease-out forwards;
}

@keyframes mc-frys-ghost-rise {
 0% {
 opacity: 0;
 transform: translate(-50%, -50%) scale(0.55);
 filter: blur(2px);
 }
 22% {
 opacity: 0;
 transform: translate(calc(-50% + 1px), calc(-50% - 26px)) scale(0.62);
 filter: blur(2px);
 }
 30% {
 opacity: 0.92;
 transform: translate(calc(-50% + 2px), calc(-50% - 42px)) scale(0.78);
 filter: blur(0) drop-shadow(0 0 10px rgba(220, 235, 255, 0.55));
 }
 45% {
 opacity: 1;
 transform: translate(calc(-50% - 3px), calc(-50% - 58px)) scale(0.9);
 filter: drop-shadow(0 0 10px rgba(210, 230, 255, 0.5));
 }
 62% {
 opacity: 0.78;
 transform: translate(calc(-50% + 2px), calc(-50% - 76px)) scale(0.98);
 filter: blur(0.5px) drop-shadow(0 0 6px rgba(190, 210, 240, 0.35));
 }
 80% {
 opacity: 0.35;
 transform: translate(calc(-50% - 1px), calc(-50% - 94px)) scale(1.04);
 filter: blur(2px);
 }
 100% {
 opacity: 0;
 transform: translate(-50%, calc(-50% - 112px)) scale(1.08);
 filter: blur(6px);
 }
}

@media (prefers-reduced-motion: reduce) {
.mc-frys__ghost.is-rising {
 animation: none;
 opacity: 0;
 }
}

.mc-frys:hover,
.mc-frys:focus-visible {
 opacity: 1;
 transform: translateY(-2px);
}

.mc-frys:focus-visible {
 outline: 2px solid rgba(242, 168, 168, 0.9);
 outline-offset: 4px;
 border-radius: 8px;
}

.mc-frys__stone {
 position: relative;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-width: 56px;
 min-height: 70px;
 padding: 10px 12px 8px;
 border-radius: 26px 26px 6px 6px;
 background: linear-gradient(180deg, #7b8494 0%, #525c6c 52%, #3a4250 100%);
 border: 1px solid rgba(152, 186, 227, 0.18);
 box-shadow:
 0 8px 18px rgba(0, 0, 0, 0.35),
 inset 0 1px 0 rgba(255, 255, 255, 0.12);
 color: #eef2f7;
 font-weight: 900;
 line-height: 1.1;
 text-align: center;
 pointer-events: none;
 overflow: hidden;
}

.mc-frys__cracks {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 1;
}

.mc-frys__cracks path {
 fill: none;
 stroke: rgba(18, 22, 30, 0.38);
 stroke-linecap: round;
 stroke-linejoin: round;
 vector-effect: non-scaling-stroke;
}

.mc-frys__crack--a { stroke-width: 0.55; stroke-dasharray: 2.5 1.2; opacity: 0.72; }
.mc-frys__crack--b { stroke-width: 0.95; opacity: 0.55; }
.mc-frys__crack--c { stroke-width: 0.45; stroke-dasharray: 1.8 2.4; opacity: 0.65; }
.mc-frys__crack--d { stroke-width: 0.7; opacity: 0.6; }
.mc-frys__crack--e { stroke-width: 1.05; stroke-dasharray: 3 1.5; opacity: 0.48; }
.mc-frys__crack--f { stroke-width: 0.5; opacity: 0.58; }

.mc-frys__rip,
.mc-frys__name {
 position: relative;
 z-index: 2;
}

.mc-frys__rip {
 font-size: 0.58rem;
 letter-spacing: 0.14em;
}

.mc-frys__name {
 margin-top: 2px;
 font-size: 0.72rem;
}

/* Fry's modal */
.mc-frys-modal {
 position: fixed;
 inset: 0;
 z-index: 1100;
 display: none;
}

.mc-frys-modal.is-open {
 display: block;
}

.mc-frys-modal__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.82);
}

.mc-frys-modal__dialog {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: min(900px, 92vw);
 padding: 14px 14px 18px;
 border-radius: 16px;
 background: linear-gradient(180deg, rgba(21, 39, 60, 0.98), rgba(10, 18, 28, 0.96));
 border: 1px solid rgba(152, 186, 227, 0.18);
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.mc-frys-modal__close {
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 2;
 width: 36px;
 height: 36px;
 padding: 0;
 border: 1px solid rgba(152, 186, 227, 0.25);
 border-radius: 10px;
 background: rgba(14, 22, 35, 0.85);
 color: #fff;
 font-size: 1rem;
 line-height: 1;
 cursor: pointer;
}

.mc-frys-modal__close:hover {
 filter: brightness(1.08);
}

.mc-frys-modal__title {
 margin: 0 0 10px;
 padding-right: 42px;
 font-size: 1.1rem;
 font-weight: 900;
}

.mc-frys-modal__video,
.mc-frys-modal__video iframe {
 width: 100%;
 display: block;
 border: 0;
 border-radius: 12px;
 aspect-ratio: 16 / 9;
 background: #000;
}

@media (max-width: 900px) {
.mc-spotlight__grid {
 grid-template-columns: 1fr;
 }

.mc-spotlight__copy {
 order: 2;
 }

.mc-spotlight__media {
 order: 1;
 }

}

@media (max-width: 640px) {
.mc-frys {
 transform: scale(0.92);
 transform-origin: left bottom;
 }

.mc-frys:hover,
.mc-frys:focus-visible {
 transform: scale(0.92) translateY(-2px);
 }

.mc-spotlight:has(.mc-flip.is-flipped).mc-frys {
 transform: scale(0.92) translateY(8px);
 }
}