/**
 * Ashenborn Theme - Additional Styles
 *
 * This file contains additional styles beyond the base theme.
 * Customize these to match your Figma design.
 *
 * @package Ashenborn
 */

/* ==========================================================================
   Global Mobile Fixes
   ========================================================================== */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Safe area padding for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    .fixed-banner {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .fixed-banner__star,
    .fixed-banner__dice-img {
        animation: none !important;
    }
}

/* ==========================================================================
   Loading States
   ========================================================================== */
.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Form Validation States
   ========================================================================== */
.form-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.form-input.is-valid {
    border-color: #22c55e;
}

/* ==========================================================================
   Hero Background Effects
   ========================================================================== */
.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

/* Red overlay on hero */
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #CE3815;
    opacity: 0.15;
    z-index: 2;
    pointer-events: none;
}

/* Ember Fire Effect Canvas Container */
.hero__ember-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* Above background, below content */
    pointer-events: none;
    /* Allow clicks to pass through */
    overflow: hidden;
}

#ember-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Gradient overlay */
.hero__background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, var(--color-background) 70%);
    z-index: 1;
}

/* Animated particles/stars effect */
.hero__background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ==========================================================================
   VIP Card Enhancements
   ========================================================================== */
.vip-card {
    position: relative;
    overflow: hidden;
}

.vip-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 40%,
            rgba(233, 69, 96, 0.1) 50%,
            transparent 60%);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* ==========================================================================
   Button Hover Effects
   ========================================================================== */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* ==========================================================================
   Focus States (Accessibility)
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn:focus-visible,
.social-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: var(--spacing-md);
}

/* ==========================================================================
   WPForms Styling Overrides
   ========================================================================== */
.wpforms-container {
    --wpforms-background-color: var(--color-surface);
    --wpforms-field-background-color: var(--color-surface);
    --wpforms-field-border-color: var(--color-border);
    --wpforms-button-background-color: var(--color-accent);
    --wpforms-label-color: var(--color-text);
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
    background: var(--color-surface) !important;
    border: 2px solid var(--color-border) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-md) !important;
}

.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.2) !important;
}

.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
    background: var(--color-accent) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all var(--transition-fast) !important;
}

.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover {
    background: var(--color-accent-hover) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   WP Simple Pay Styling Overrides
   ========================================================================== */
.simpay-form-wrap {
    background: transparent !important;
}

.simpay-form-wrap .simpay-form-control input {
    background: var(--color-surface) !important;
    border: 2px solid var(--color-border) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-md) !important;
}

.simpay-form-wrap .simpay-form-control input:focus {
    border-color: var(--color-accent) !important;
}

.simpay-form-wrap .simpay-checkout-btn {
    background: var(--color-accent) !important;
    border-radius: var(--radius-md) !important;
}

/* ==========================================================================
   Stripe Elements Styling
   ========================================================================== */
.StripeElement {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: border-color var(--transition-fast);
}

.StripeElement--focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.2);
}

.StripeElement--invalid {
    border-color: #ef4444;
}

/* ==========================================================================
   Responsive Enhancements
   ========================================================================== */
@media (max-width: 991px) {
    .hero__background::after {
        background-size: 100px 100px;
    }

    .community-buttons {
        flex-direction: column;
    }

    .community-buttons .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {

    .hero__background,
    .social-links,
    .share-section,
    .countdown {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .btn {
        border: 1px solid black !important;
        background: white !important;
        color: black !important;
    }
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */
@media (prefers-contrast: high) {
    :root {
        --color-border: #ffffff;
    }

    .btn {
        border: 2px solid currentColor;
    }

    .form-input {
        border-width: 3px;
    }
}

/* ==========================================================================
   Dark Mode (already dark, but for system preference)
   ========================================================================== */
@media (prefers-color-scheme: light) {
    /* If user prefers light mode, we keep dark anyway for brand consistency */
    /* Uncomment below to support light mode */
    /*
    :root {
        --color-primary: #f5f5f5;
        --color-secondary: #e5e5e5;
        --color-background: #ffffff;
        --color-surface: #f5f5f5;
        --color-text: #1a1a1a;
        --color-text-muted: #666666;
        --color-border: #e5e5e5;
    }
    */
}

/* ==========================================================================
   Fixed Ashenborn Symbol (Top Right Corner)
   ========================================================================== */
.fixed-symbol {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    pointer-events: none;
    opacity: 0.9;
    animation: symbol-pulse 4s infinite ease-in-out;
}

.fixed-symbol img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes symbol-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* Hero logo container */
.hero__logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Red glow behind logo */
.hero__logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 938px;
    height: 67px;
    background: #D12700;
    border-radius: 938px;
    filter: blur(55.95px);
    z-index: 0;
    pointer-events: none;
}

/* Hero word logo pulse */
.hero__logo-image {
    position: relative;
    z-index: 1;
    animation: logo-pulse 5s infinite ease-in-out !important;
}

@keyframes logo-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.015);
    }
}

.fixed-symbol:hover {
    opacity: 1;
    transform: scale(1.05);
    pointer-events: auto;
}

@media (max-width: 991px) {
    .fixed-symbol {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .fixed-symbol {
        width: 36px;
        height: 36px;
        top: 10px;
        right: 10px;
    }
}

/* ==========================================================================
   Fixed Bottom Banner - Launch Announcement
   Uses banner.png which has complete design baked in
   ========================================================================== */
.fixed-banner {
    position: fixed !important;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    height: 140px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: block !important;
    overflow: visible !important;
}

.fixed-banner__background {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 110% !important;
    height: 110% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.fixed-banner__background img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
}

.fixed-banner__content {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(calc(-50% - 40px)) !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 1100px !important;
    padding: 0 1.5rem !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.fixed-banner__dice {
    flex-shrink: 0 !important;
    width: 180px !important;
    height: 140px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin-left: -40px !important;
}

/* Double star glow behind dice */
.fixed-banner__star {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 700px !important;
    height: 700px !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.fixed-banner__star1 {
    transform: translate(calc(-30% - 15px), calc(-55% + 15px)) rotate(0deg) !important;
    opacity: 0.5 !important;
    animation: star-pulse 3s infinite ease-in-out !important;
}

.fixed-banner__star2 {
    transform: translate(calc(-35% - 15px), calc(-50% + 15px)) rotate(40deg) !important;
    opacity: 0.4 !important;
    animation: star-pulse 3s infinite ease-in-out 1s !important;
}

/* Dice image with float animation */
.fixed-banner__dice-img {
    position: relative !important;
    z-index: 2 !important;
    width: 130px !important;
    height: auto !important;
    animation: dice-float 4s infinite ease-in-out !important;
    filter: drop-shadow(0 0 20px rgba(255, 94, 58, 0.8)) !important;
}

@keyframes dice-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(3deg);
    }
}

@keyframes star-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.fixed-banner__text {
    flex: 0 0 auto !important;
    max-width: 349px !important;
    margin-left: -20px !important;
    margin-top: -10px;
}

.fixed-banner__heading {
    color: #ED9B75 !important;
    font-family: 'Elan ITC Pro', serif !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 90% !important;
    letter-spacing: -0.64px !important;
    margin: 0 0 8px 0 !important;
    white-space: nowrap !important;
    text-transform: none !important;
}

.fixed-banner__subtext {
    color: #BB9E8D !important;
    font-family: 'Elan ITC Pro', serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 100% !important;
    margin: 0 !important;
}

.fixed-banner__subtext .highlight {
    color: #D5BBAB !important;
    font-weight: 500 !important;
}

/* Banner Form */
.fixed-banner__form {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: -45px !important;
}

.fixed-banner__form .mc4wp-form,
.fixed-banner__form .mc4wp-form-fields {
    display: flex !important;
    align-items: stretch !important;
}

.fixed-banner__form .mc4wp-form-fields p {
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Hide label */
.fixed-banner__form .mc4wp-form-fields label {
    display: none !important;
}

/* Email input - visible styled */
.fixed-banner__form .mc4wp-form-fields input[type="email"] {
    display: flex !important;
    width: 392px !important;
    height: 50px !important;
    padding: 10px 20px 6px 20px !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    font-family: 'Elan ITC Pro', serif !important;
    color: #f5edda !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(156, 140, 130, 0.4) !important;
    border-right: none !important;
    border-radius: 5px 0 0 5px !important;
    cursor: text !important;
}

.fixed-banner__form .mc4wp-form-fields input[type="email"]:focus {
    outline: none !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-color: #c43e1c !important;
    box-shadow: 0 0 10px rgba(196, 62, 28, 0.3) !important;
}

.fixed-banner__form .mc4wp-form-fields input[type="email"]::placeholder {
    color: #9c8c82 !important;
    opacity: 1 !important;
}

/* Submit button - visible styled */
.fixed-banner__form .mc4wp-form-fields input[type="submit"] {
    display: flex !important;
    height: 50px !important;
    padding: 10px 20px 6px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    font-family: 'Elan ITC Pro', serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #f5edda !important;
    background: #B25033 !important;
    border: none !important;
    border-radius: 0 5px 5px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 0 10px 0 rgba(245, 160, 65, 0.50) inset, 0 0 10px 0 rgba(252, 67, 22, 0.50) !important;
}

.fixed-banner__form .mc4wp-form-fields input[type="submit"]:hover {
    background: #c45a3d !important;
    box-shadow: 0 0 15px 0 rgba(245, 160, 65, 0.70) inset, 0 0 15px 0 rgba(252, 67, 22, 0.70) !important;
}

/* CTA Attention Arrow Animation - Curved Filled Arrow */
.cta-attention-arrow {
    position: absolute;
    top: -35px;
    left: 100%;
    margin-left: 5px;
    width: 70px;
    height: 50px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
}

.cta-attention-arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cta-attention-arrow .arrow-body,
.cta-attention-arrow .arrow-head {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 8px rgba(80, 200, 120, 0.5));
}

/* Animation when active */
.cta-attention-arrow.is-active {
    animation: arrowAppear 0.4s ease-out forwards, arrowBounce 0.35s ease-in-out 0.4s 3, arrowFadeOut 0.3s ease-out 1.5s forwards;
}

/* Scale in */
@keyframes arrowAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) translateX(10px);
    }
    70% {
        opacity: 1;
        transform: scale(1.1) translateX(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

/* Bounce pointing at button - nudge left toward button */
@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}

/* Fade out */
@keyframes arrowFadeOut {
    to {
        opacity: 0;
        transform: scale(0.8) translateX(10px);
    }
}

/* Hide mc4wp response box */
.fixed-banner__form .mc4wp-response {
    display: none !important;
}

/* Old fallback form styles removed - using transparent overlay on banner.png */

/* Responsive Banner Styles */
@media (max-width: 1024px) {
    .fixed-banner {
        height: 110px !important;
    }

    .fixed-banner__content {
        transform: translateX(-50%) !important;
        padding: 0 1rem !important;
        gap: 0.75rem !important;
    }

    .fixed-banner__dice {
        width: 120px !important;
        height: 100px !important;
        margin-left: -20px !important;
    }

    .fixed-banner__dice-img {
        width: 90px !important;
    }

    .fixed-banner__star {
        width: 400px !important;
        height: 400px !important;
    }

    .fixed-banner__text {
        max-width: 280px !important;
        margin-left: -10px !important;
    }

    .fixed-banner__heading {
        font-size: 24px !important;
    }

    .fixed-banner__subtext {
        font-size: 14px !important;
    }

    .fixed-banner__form {
        margin-right: -20px !important;
    }

    .fixed-banner__form .mc4wp-form-fields input[type="email"] {
        width: 160px !important;
        height: 36px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .fixed-banner__form .mc4wp-form-fields input[type="submit"] {
        height: 36px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   Mobile Banner Layout (max-width: 768px)

   Nested Flexbox approach preserving premium look:
   ┌─────────────────────────────────────────┐
   │  [D20]  Launching March 23!             │  ← Row 1: dice + text (flex row)
   │         Get exclusive dice and extra... │     align-items: center
   ├─────────────────────────────────────────┤
   │  [________email________] [SIGN UP NOW]  │  ← Row 2: form (flex row)
   └─────────────────────────────────────────┘

   CSS Structure:
   - .fixed-banner__content: flex-direction: column (stacks two rows)
   - Top row (dice + text): inline flex alignment via absolute positioning
   - Bottom row (form): flex-direction: row, input flex:1, button auto
   - Background: object-fit: cover, height: 100%
   ========================================================================== */

@media (max-width: 991px) {

    /* Banner container: brushstroke fills the banner */
    .fixed-banner {
        height: auto !important;
        min-height: 140px !important;
        max-height: 160px !important;
        padding: 12px 0 !important;
        overflow: visible !important;
        /* Allow dice to extend above */
        background: transparent !important;
    }

    /* Background: anchored from bottom, extends up for jagged top edge */
    .fixed-banner__background {
        display: block !important;
        position: absolute !important;
        width: 120% !important;
        height: 142% !important;
        top: auto !important;
        bottom: -22px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .fixed-banner__background img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        /* Anchor image to bottom */
    }

    /* Content Container: flex-direction: column for two-row stack */
    .fixed-banner__content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        transform: translateX(-50%) !important;
        padding: 10px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ROW 1 TOP SECTION: Dice + Text side by side
       Dice positioned absolutely, text has left padding to accommodate */

    /* Dice: BIGGER (70px) and moved UP */
    .fixed-banner__dice {
        display: flex !important;
        position: absolute !important;
        left: 8px !important;
        top: 0 !important;
        transform: translateY(-35%) !important;
        /* Move up more */
        width: 80px !important;
        height: 80px !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        z-index: 10 !important;
    }

    .fixed-banner__dice-img {
        width: 75px !important;
        height: auto !important;
        filter: drop-shadow(0 0 15px rgba(255, 94, 58, 0.8)) drop-shadow(0 0 25px rgba(255, 140, 66, 0.5)) !important;
        animation: dice-float-mobile 4s infinite ease-in-out !important;
    }

    /* Hide the 700px star glow elements - too large for mobile */
    .fixed-banner__star,
    .fixed-banner__star1,
    .fixed-banner__star2 {
        display: none !important;
    }

    /* Text: heading 18px, subtext 12px, left-aligned with padding for bigger dice */
    .fixed-banner__text {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 90px !important;
        /* Space for 75px dice + 15px gap */
        padding-right: 12px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
        box-sizing: border-box !important;
        order: 1 !important;
    }

    .fixed-banner__heading {
        font-size: 18px !important;
        white-space: nowrap !important;
        margin-bottom: 3px !important;
        line-height: 1.1 !important;
    }

    .fixed-banner__subtext {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    /* ROW 2: Form - flex-direction: row, input takes remaining space */
    .fixed-banner__form {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: stretch !important;
        order: 2 !important;
    }

    .fixed-banner__form .mc4wp-form,
    .fixed-banner__form .mc4wp-form-fields,
    .fixed-banner__form .mc4wp-form-fields p {
        width: 100% !important;
        display: flex !important;
    }

    /* Form controls: flex-direction: row */
    .fixed-banner__form .mc4wp-form-fields {
        flex-direction: row !important;
        gap: 0 !important;
    }

    .fixed-banner__form .mc4wp-form-fields p {
        flex-direction: row !important;
        align-items: stretch !important;
    }

    /* Email input: takes remaining space (flex: 1) */
    .fixed-banner__form .mc4wp-form-fields input[type="email"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
        border-radius: 5px 0 0 5px !important;
        border-right: none !important;
    }

    /* Submit button: auto-width (flex: 0 0 auto) */
    .fixed-banner__form .mc4wp-form-fields input[type="submit"] {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 42px !important;
        padding: 8px 18px !important;
        font-size: 12px !important;
        border-radius: 0 5px 5px 0 !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   Small Mobile (375px - 480px)

   Optimized two-row layout for narrow screens:
   ┌─────────────────────────────┐
   │  [D20]  Launching March 23! │  ← Row 1: dice + heading side by side
   │         Get exclusive dice..│  ← Subtext below heading
   ├─────────────────────────────┤
   │  [____email____] [SIGN UP]  │  ← Row 2: form controls
   └─────────────────────────────┘

   Key specs per requirements:
   - Banner height: ~130-150px to fit both rows
   - Dice size: 50px width (premium look preserved)
   - Text: heading 18px, subtext 12px, left-aligned
   - Form: input takes remaining space, button auto-width
   ========================================================================== */

@media (max-width: 480px) {
    .fixed-banner {
        min-height: 140px !important;
        max-height: 160px !important;
        padding: 10px 0 !important;
    }

    /* Background: anchored from bottom */
    .fixed-banner__background {
        width: 125% !important;
        height: 142% !important;
    }

    .fixed-banner__content {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    /* Dice: keep big (70px) and moved up */
    .fixed-banner__dice {
        left: 5px !important;
        top: 0 !important;
        transform: translateY(-30%) !important;
        width: 91px !important;
        height: 120px !important;
    }

    .fixed-banner__dice-img {
        width: 70px !important;
        filter: drop-shadow(0 0 12px rgba(255, 94, 58, 0.8)) drop-shadow(0 0 20px rgba(255, 140, 66, 0.5)) !important;
    }

    /* Text: adjust padding for bigger dice */
    .fixed-banner__text {
        padding-left: 85px !important;
        /* 70px dice + 15px gap */
        padding-right: 8px !important;
    }

    .fixed-banner__heading {
        font-size: 17px !important;
        margin-bottom: 2px !important;
    }

    .fixed-banner__subtext {
        font-size: 11px !important;
        -webkit-line-clamp: 2 !important;
        line-height: 1.25 !important;
    }

    /* Form: input takes remaining space, button auto-width */
    .fixed-banner__form .mc4wp-form-fields input[type="email"] {
        height: 40px !important;
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    .fixed-banner__form .mc4wp-form-fields input[type="submit"] {
        height: 40px !important;
        font-size: 11px !important;
        padding: 6px 14px !important;
    }
}

/* Extra Small Mobile (< 375px) - Graceful degradation for very narrow screens */
@media (max-width: 374px) {
    .fixed-banner {
        min-height: 130px !important;
        max-height: 150px !important;
        padding: 8px 0 !important;
    }

    /* Background: anchored from bottom */
    .fixed-banner__background {
        width: 130% !important;
        height: 210% !important;
    }

    .fixed-banner__content {
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    /* Still decent sized dice on very small screens */
    .fixed-banner__dice {
        left: 3px !important;
        top: 0 !important;
        transform: translateY(-25%) !important;
        width: 65px !important;
        height: 65px !important;
    }

    .fixed-banner__dice-img {
        width: 60px !important;
        filter: drop-shadow(0 0 10px rgba(255, 94, 58, 0.7)) drop-shadow(0 0 15px rgba(255, 140, 66, 0.4)) !important;
    }

    .fixed-banner__text {
        padding-left: 70px !important;
        padding-right: 5px !important;
    }

    .fixed-banner__heading {
        font-size: 15px !important;
    }

    .fixed-banner__subtext {
        font-size: 10px !important;
        -webkit-line-clamp: 2 !important;
    }

    .fixed-banner__form .mc4wp-form-fields input[type="email"] {
        height: 36px !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    .fixed-banner__form .mc4wp-form-fields input[type="submit"] {
        height: 36px !important;
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
}

/* Mobile dice animation - gentler float for smaller size */
@keyframes dice-float-mobile {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(2deg);
    }
}

/* ==========================================================================
   Best of Both Worlds Section
   ========================================================================== */
.best-of-both-worlds {
    background: linear-gradient(180deg, #2D1810 0%, #1a0f0a 50%, #0f0f1a 100%);
    padding: var(--spacing-2xl) 0;
    overflow: hidden;
    position: relative;
}

/* Header Styles */
.best-of-both-worlds__header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.best-of-both-worlds__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-style: italic;
    font-weight: 700;
    color: #E94560;
    margin-bottom: var(--spacing-md);
    text-shadow: 0 0 40px rgba(233, 69, 96, 0.4);
    letter-spacing: 0.02em;
}

.best-of-both-worlds__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Products Container */
.best-of-both-worlds__products {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 8vw, 8rem);
    flex-wrap: wrap;
    padding: var(--spacing-xl) 0;
}

/* Product Showcase */
.product-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    perspective: 1000px;
}

.product-showcase__image {
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-showcase__img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* Book specific styling - tilted */
.product-showcase--book .product-showcase__image {
    transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
    animation: floatBook 6s ease-in-out infinite;
}

.product-showcase--book .product-showcase__img {
    max-width: 280px;
}

/* Digital/Macbook specific styling - angled */
.product-showcase--digital .product-showcase__image {
    transform: perspective(1000px) rotateY(5deg) rotateX(-2deg);
    animation: floatDigital 6s ease-in-out infinite;
    animation-delay: -3s;
}

.product-showcase--digital .product-showcase__img {
    max-width: 420px;
}

/* Glow Effects */
.product-showcase__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    filter: blur(60px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-showcase__glow--warm {
    background: radial-gradient(ellipse, rgba(233, 69, 96, 0.4) 0%, rgba(255, 140, 66, 0.2) 40%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

.product-showcase__glow--cool {
    background: radial-gradient(ellipse, rgba(100, 181, 246, 0.3) 0%, rgba(233, 69, 96, 0.2) 40%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
    animation-delay: -2s;
}

/* Product Labels */
.product-showcase__label {
    margin-top: var(--spacing-lg);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Hover Effects */
.product-showcase:hover .product-showcase__image {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-10px) scale(1.02);
}

.product-showcase:hover .product-showcase__glow {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Float Animations */
@keyframes floatBook {

    0%,
    100% {
        transform: perspective(1000px) rotateY(-8deg) rotateX(2deg) translateY(0);
    }

    50% {
        transform: perspective(1000px) rotateY(-8deg) rotateX(2deg) translateY(-15px);
    }
}

@keyframes floatDigital {

    0%,
    100% {
        transform: perspective(1000px) rotateY(5deg) rotateX(-2deg) translateY(0);
    }

    50% {
        transform: perspective(1000px) rotateY(5deg) rotateX(-2deg) translateY(-15px);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Scroll-triggered animation classes (add via JS) */
.product-showcase.animate-in .product-showcase__image {
    animation: revealProduct 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes revealProduct {
    from {
        opacity: 0;
        transform: perspective(1000px) translateY(60px) scale(0.9);
    }

    to {
        opacity: 1;
    }
}

/* Best of Both Worlds Responsive Styles */
@media (max-width: 992px) {
    .best-of-both-worlds__products {
        gap: var(--spacing-xl);
    }

    .product-showcase--book .product-showcase__img {
        max-width: 220px;
    }

    .product-showcase--digital .product-showcase__img {
        max-width: 340px;
    }
}

@media (max-width: 991px) {
    .best-of-both-worlds {
        padding: var(--spacing-xl) 0;
    }

    .best-of-both-worlds__products {
        flex-direction: column;
        gap: var(--spacing-2xl);
    }

    .product-showcase--book .product-showcase__image,
    .product-showcase--digital .product-showcase__image {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }

    .product-showcase--book .product-showcase__img {
        max-width: 200px;
    }

    .product-showcase--digital .product-showcase__img {
        max-width: 300px;
    }

    .product-showcase__glow {
        filter: blur(40px);
    }

    /* Simpler float animation on mobile */
    .product-showcase--book .product-showcase__image {
        animation: floatBookMobile 6s ease-in-out infinite;
    }

    .product-showcase--digital .product-showcase__image {
        animation: floatDigitalMobile 6s ease-in-out infinite;
        animation-delay: -3s;
    }
}

@keyframes floatBookMobile {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatDigitalMobile {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 480px) {
    .best-of-both-worlds__title {
        font-size: 2rem;
    }

    .product-showcase--book .product-showcase__img {
        max-width: 160px;
    }

    .product-showcase--digital .product-showcase__img {
        max-width: 260px;
    }
}

/* Reduced Motion Support for Best of Both Worlds */
@media (prefers-reduced-motion: reduce) {

    .product-showcase--book .product-showcase__image,
    .product-showcase--digital .product-showcase__image {
        animation: none;
        transform: none;
    }

    .product-showcase__glow--warm,
    .product-showcase__glow--cool {
        animation: none;
    }

    .product-showcase:hover .product-showcase__image {
        transform: translateY(-5px);
    }
}

/* ==========================================================================
   BOBW Section (New Implementation with Individual Components)
   ========================================================================== */
.bobw-section {
    position: relative;
    padding: 0 0 200px;
    margin-top: -80px;
    background: #301814;
    /* Matches trailer section */
}

/* Product Composition Container */
.bobw-section__composition {
    z-index: 20;
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 700px;
    margin: 0 auto;
    top: -100px;
}

/* Red Glow (large, behind everything) */
.bobw-section__glow-red {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    max-width: 1200px;
    pointer-events: none;
    z-index: 0;
    animation: bobwRedGlow 10s ease-in-out infinite;
}

.bobw-section__glow-red-img {
    width: 100%;
    height: auto;
    opacity: 1;
}

@keyframes bobwRedGlow {

    0%,
    100% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Product Glow (behind book/device) */
.bobw-section__product-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 120%;
    max-width: 900px;
    pointer-events: none;
    z-index: 1;
    animation: bobwProductGlow 8s ease-in-out infinite;
}

.bobw-section__product-glow-img {
    width: 100%;
    height: auto;
    opacity: 1;
}

@keyframes bobwProductGlow {

    0%,
    100% {
        opacity: 0.9;
        transform: translate(-50%, -40%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -40%) scale(1.05);
    }
}

/* Glow effects behind corner products */
.bobw-section__glow {
    position: absolute;
    z-index: 20;
    pointer-events: none;
}

.bobw-section__glow-img {
    width: auto;
    height: auto;
    max-width: 600px;
}

.bobw-section__glow--left {
    bottom: -15%;
    left: -3%;
}

.bobw-section__glow--right {
    bottom: -15%;
    right: -4%;
}

.bobw-section__glow--top {
    top: -33%;
    left: -4%;
}

.bobw-section__glow--macbook {
    bottom: -10%;
    right: -3%;
    z-index: 22;
}

.bobw-section__glow--book {
    bottom: -10%;
    left: -3%;
    z-index: 22;
}

/* Physical Book - bottom-left corner, edge cut off */
.bobw-section__book {
    position: absolute;
    bottom: -10%;
    left: -2%;
    z-index: 25;
    animation: bobwBookFloat 12s ease-in-out infinite;
}

.bobw-section__book-img {
    max-width: 477px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

@keyframes bobwBookFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

/* Digital Device (Tablet) - top-left corner, edge cut off */
.bobw-section__device {
    position: absolute;
    top: -10%;
    left: -2%;
    z-index: 25;
    animation: bobwDeviceFloat 12s ease-in-out infinite;
    animation-delay: -6s;
}

.bobw-section__device-img {
    max-width: 423px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
}

/* Player Rulebook - top-right corner, edge cut off */
.bobw-section__rulebook {
    position: absolute;
    top: -15%;
    right: -1%;
    z-index: 25;
    animation: bobwBookFloat 12s ease-in-out infinite;
    animation-delay: -3s;
}

.bobw-section__rulebook-img {
    max-width: 392px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* MacBook - bottom-right corner, edge cut off */
.bobw-section__macbook {
    position: absolute;
    bottom: -2%;
    right: -4%;
    z-index: 25;
    animation: bobwDeviceFloat 12s ease-in-out infinite;
    animation-delay: -8s;
}

.bobw-section__macbook-img {
    max-width: 570px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
}

@keyframes bobwDeviceFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(-1deg);
    }
}

/* Title - centered over products, max 513px */
.bobw-section__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    pointer-events: none;
}

.bobw-section__title-img {
    max-width: 513px;
    max-height: 318px;
    width: auto;
    height: auto;
}

/* Subtitle - positioned below title */
.bobw-section__subtitle {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translateX(-50%);
    color: #ED9B75;
    text-align: center;
    text-shadow: 0 0 8px #800800;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    max-width: 487px;
    margin: 0;
    z-index: 4;
}

/* Floating Dice */
.bobw-section__dice {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.bobw-section__dice-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 25px rgba(191, 65, 27, 0.5));
}

/* D8 Dice - 124 x 127 */
.bobw-section__dice--d8 {
    top: 12%;
    right: 38%;
    width: 124px;
    height: 127px;
    animation: bobwDiceFloat1 10s ease-in-out infinite;
}

@keyframes bobwDiceFloat1 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-12px) rotate(5deg);
    }

    50% {
        transform: translateY(-18px) rotate(-3deg);
    }

    75% {
        transform: translateY(-8px) rotate(2deg);
    }
}

/* D20 Dice - 115 x 110 */
.bobw-section__dice--d20 {
    top: 40%;
    right: 22%;
    width: 115px;
    height: 110px;
    animation: bobwDiceFloat2 12s ease-in-out infinite;
    animation-delay: -4s;
}

@keyframes bobwDiceFloat2 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(-4deg);
    }

    50% {
        transform: translateY(-22px) rotate(3deg);
    }

    75% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

/* Corner Dice 1 (top-right area) */
.bobw-section__dice--corner-1 {
    top: 9%;
    right: 5%;
    width: 120px;
    height: auto;
    z-index: 25;
    animation: bobwDiceFloat1 10s ease-in-out infinite;
    animation-delay: -2s;
}

/* Corner Dice 2 (bottom-left area) */
.bobw-section__dice--corner-2 {
    bottom: 20%;
    left: 13%;
    width: 208px;
    height: auto;
    z-index: 25;
    animation: bobwDiceFloat2 12s ease-in-out infinite;
    animation-delay: -6s;
}

/* Corner Dice 3 (near top-right book) */
.bobw-section__dice--corner-3 {
    top: -25%;
    right: 24%;
    width: 185px;
    height: auto;
    z-index: 25;
    animation: bobwDiceFloat1 11s ease-in-out infinite;
    animation-delay: -4s;
}

/* BOBW Section Responsive */
@media (max-width: 992px) {
    .bobw-section {
        margin-top: -60px;
    }

    .bobw-section__composition {
        height: 600px;
        max-width: 900px;
    }

    .bobw-section__title {
        top: 48%;
    }

    .bobw-section__subtitle {
        top: 74%;
    }

    .bobw-section__book {
        top: calc(5% - 30px);
        left: calc(20% + 10px);
    }

    .bobw-section__book-img {
        max-width: 420px;
    }

    .bobw-section__device {
        bottom: -180px;
        right: 40px;
    }

    .bobw-section__device-img {
        max-width: 750px;
    }

    .bobw-section__title-img {
        max-width: 420px;
    }

    .bobw-section__dice--d8 {
        width: 100px;
        height: 102px;
    }

    .bobw-section__dice--d20 {
        width: 95px;
        height: 90px;
    }
}

@media (max-width: 991px) {
    .bobw-section {
        margin-top: -40px;
        padding: 60px 0 100px;
    }

    .bobw-section__composition {
        height: 500px;
        max-width: 100%;
    }

    .bobw-section__title {
        top: 46%;
    }

    .bobw-section__subtitle {
        top: 72%;
        font-size: 20px;
        max-width: 300px;
    }

    .bobw-section__title-img {
        max-width: 320px;
    }

    .bobw-section__book {
        top: 5%;
        left: 10%;
    }

    .bobw-section__book-img {
        max-width: 320px;
    }

    .bobw-section__device {
        left: 30%;
        right: auto;
        bottom: 5%;
    }

    .bobw-section__device-img {
        max-width: 520px;
    }

    .bobw-section__dice--d8 {
        top: 8%;
        right: 25%;
        width: 70px;
        height: 72px;
    }

    .bobw-section__dice--d20 {
        top: 35%;
        right: 8%;
        width: 70px;
        height: 66px;
    }
}

/* Reduced Motion Support for BOBW */
@media (prefers-reduced-motion: reduce) {

    .bobw-section__product-glow,
    .bobw-section__book,
    .bobw-section__device,
    .bobw-section__dice {
        animation: none !important;
    }

    .bobw-section__product-glow-img {
        opacity: 0.8;
    }
}

/* ==========================================================================
   Section Transition (Hero to Trailer)
   ========================================================================== */
.section-transition {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 180px;
    z-index: 10;
    pointer-events: none;
    transform: translateY(-65%);
}

.section-transition__left,
.section-transition__right {
    position: absolute;
    bottom: 0;
    height: auto;
    max-height: 180px;
}

.section-transition__left {
    left: -8%;
    /* Extend outside viewport to prevent gaps */
    width: auto;
    max-width: 80%;
    /* Parallax: defaults to final state (no movement) */
    --offset-x: 0%;
    --p-scale: 1;
    transform: translateX(var(--offset-x)) scale(var(--p-scale));
    transform-origin: left center;
    will-change: transform;
}

.section-transition__right {
    right: -8%;
    /* Extend outside viewport to prevent gaps */
    width: auto;
    max-width: 78%;
    /* Parallax: defaults to final state (no movement) */
    --offset-x: 0%;
    --p-scale: 1;
    transform: translateX(var(--offset-x)) scale(var(--p-scale));
    transform-origin: right center;
    will-change: transform;
}

@media (max-width: 1200px) {
    .section-transition {
        height: 140px;
    }

    .section-transition__left,
    .section-transition__right {
        max-height: 140px;
    }
}

@media (max-width: 991px) {
    .section-transition {
        height: 100px;
        /* Prevent SVGs from causing horizontal overflow on mobile */
        overflow: hidden;
    }

    .section-transition__left,
    .section-transition__right {
        max-height: 100px;
    }

    .section-transition__left {
        left: -10%;
        max-width: 85%;
    }

    .section-transition__right {
        right: -10%;
        max-width: 82%;
    }
}

@media (max-width: 480px) {
    .section-transition {
        height: 70px;
    }

    .section-transition__left,
    .section-transition__right {
        max-height: 70px;
    }

    .section-transition__left {
        left: -12%;
        max-width: 90%;
    }

    .section-transition__right {
        right: -12%;
        max-width: 88%;
    }
}

/* Center paint splashes - hidden by default */
.section-transition__center-left,
.section-transition__center-right {
    display: none;
    position: absolute;
    bottom: 0;
    height: auto;
    --offset-x: 0%;
    --p-scale: 1;
    will-change: transform;
}

/* Large desktop: extend paint splashes to cover fold line */
@media (min-width: 1393px) {
    .section-transition {
        height: 280px;
    }

    .section-transition__left,
    .section-transition__right {
        max-height: 280px;
    }

    .section-transition__left {
        left: -5%;
        max-width: 70%;
        --p-scale: 1.6;
    }

    .section-transition__right {
        right: -7%;
        max-width: 68%;
        --p-scale: 1.6;
    }

    /* Show center paint splashes on large screens */
    .section-transition__center-left,
    .section-transition__center-right {
        display: block;
        max-height: 280px;
        max-width: 50%;
    }

    .section-transition__center-left {
        left: -53%;
        transform: translateX(var(--offset-x)) scaleX(-1) scale(var(--p-scale));
        transform-origin: right center;
    }

    .section-transition__center-right {
        right: 33%;
        transform: translateX(var(--offset-x)) scale(var(--p-scale));
        transform-origin: left center;
    }

    /* Center section layouts on large screens */
    .classless-section__layout,
    .everyturn-section__layout,
    .crafttime-section__layout {
        justify-content: center;
    }

    /* BOBW corner elements - push further out on large screens */
    .bobw-section__device {
        position: absolute;
        top: -33%;
        left: -1%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -6s;
    }

    .bobw-section__book {
        position: absolute;
        bottom: -4%;
        left: 0%;
        z-index: 25;
        animation: bobwBookFloat 12s ease-in-out infinite;
    }

    .bobw-section__rulebook {
        position: absolute;
        top: -39%;
        right: -1%;
        z-index: 25;
        animation: bobwBookFloat 12s ease-in-out infinite;
        animation-delay: -3s;
    }

    .bobw-section__macbook {
        position: absolute;
        bottom: -1%;
        right: 0%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -8s;
    }
}

/* BOBW adjustments for medium-large screens (992px - 1392px) */
@media (min-width: 993px) and (max-width: 1392px) {
    .bobw-section__device {
        position: absolute;
        top: -27%;
        left: -2%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -6s;
    }

    .bobw-section__device-img {
        max-width: 340px;
    }

    .bobw-section__rulebook {
        position: absolute;
        top: -36%;
        right: -1%;
        z-index: 25;
        animation: bobwBookFloat 12s ease-in-out infinite;
        animation-delay: -3s;
    }

    .bobw-section__rulebook-img {
        max-width: 310px;
    }

    .bobw-section__book-img {
        max-width: 380px;
    }

    .bobw-section__macbook-img {
        max-width: 450px;
    }

    .bobw-section__dice--corner-1 {
        top: -2%;
        right: 5%;
        width: 120px;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat1 10s ease-in-out infinite;
        animation-delay: -2s;
    }

    .bobw-section__dice--corner-2 {
        bottom: 6%;
        left: 13%;
        width: 208px;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat2 12s ease-in-out infinite;
        animation-delay: -6s;
    }

    .fixed-banner__form {
        margin-right: 28px !important;
    }
}

/* BOBW adjustments for tablet screens (481px - 992px) */
@media (min-width: 481px) and (max-width: 992px) {
    .bobw-section__device {
        position: absolute;
        top: -41%;
        left: -2%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -6s;
    }

    .bobw-section__device-img {
        max-width: 332px;
    }

    .bobw-section__book {
        top: 12%;
        left: -11%;
    }

    .bobw-section__rulebook {
        position: absolute;
        top: -54%;
        right: -1%;
        z-index: 25;
        animation: bobwBookFloat 12s ease-in-out infinite;
        animation-delay: -3s;
    }

    .bobw-section__macbook {
        position: absolute;
        bottom: -17%;
        right: -4%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -8s;
    }

    .bobw-section__dice--corner-1 {
        top: 10%;
        right: 11%;
        width: 120px;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat1 10s ease-in-out infinite;
        animation-delay: -2s;
    }

    .bobw-section__dice--corner-2 {
        bottom: 25%;
        left: 9%;
        width: 166px;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat2 12s ease-in-out infinite;
        animation-delay: -6s;
    }
}

/* BOBW adjustments for small tablet screens (561px - 767px) */
@media (min-width: 561px) and (max-width: 767px) {
    .bobw-section__device {
        position: absolute;
        top: -27%;
        left: -7%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -6s;
    }

    .bobw-section__device-img {
        max-width: 266px;
    }

    .bobw-section__book-img {
        max-width: 304px;
    }

    .bobw-section__rulebook {
        position: absolute;
        top: -27%;
        right: -1%;
        z-index: 25;
        animation: bobwBookFloat 12s ease-in-out infinite;
        animation-delay: -3s;
    }

    .bobw-section__rulebook-img {
        max-width: 248px;
    }

    .bobw-section__macbook {
        position: absolute;
        bottom: 4%;
        right: -4%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -8s;
    }

    .bobw-section__macbook-img {
        max-width: 360px;
    }

    .bobw-section__dice--corner-1 {
        top: 10%;
        right: 4%;
        width: 120px;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat1 10s ease-in-out infinite;
        animation-delay: -2s;
    }

    .bobw-section__dice--corner-3 {
        top: -19%;
        right: 24%;
        width: 185px;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat1 11s ease-in-out infinite;
        animation-delay: -4s;
    }

    .bobw-section__glow--right {
        bottom: -15%;
        right: -34%;
    }

    .bobw-section__glow--left {
        bottom: -15%;
        left: -35%;
    }

    .bobw-section__glow--book {
        bottom: -10%;
        left: -30%;
        z-index: 22;
    }

    .bobw-section__glow--top {
        top: 24%;
        left: -4%;
    }

    .bobw-section__glow--macbook {
        bottom: -10%;
        right: -27%;
        z-index: 22;
    }
}

/* BOBW adjustments for mobile screens (560px and below) */
@media (max-width: 560px) {
    .bobw-section__title-img {
        max-width: 193px;
    }

    .bobw-section__composition {
        z-index: 20;
        position: relative;
        width: 100%;
        max-width: 1100px;
        height: 700px;
        margin: 0 auto;
        top: -272px;
    }

    .bobw-section__subtitle {
        top: 57%;
        font-size: 16px;
        max-width: 290px;
    }

    .bobw-section__device {
        left: -5%;
        right: auto;
        top: -17%;
    }

    .bobw-section__device-img {
        max-width: 30vw;
    }

    .bobw-section__book {
        top: 61px;
        left: -5%;
    }

    .bobw-section__book-img {
        max-width: 24vw;
    }

    .bobw-section__macbook {
        position: absolute;
        bottom: 55%;
        right: -6%;
        z-index: 25;
        animation: bobwDeviceFloat 12s ease-in-out infinite;
        animation-delay: -8s;
    }

    .bobw-section__macbook-img {
        max-width: 47vw;
        width: auto;
        height: auto;
        filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
    }

    .bobw-section__glow-img {
        width: auto;
        height: auto;
        max-width: 45vw;
    }

    .bobw-section__glow--right {
        bottom: 66%;
        right: -14%;
    }

    .bobw-section__glow--left {
        bottom: 59%;
        left: -15%;
    }

    .bobw-section__glow--macbook {
        bottom: 53%;
        right: -3%;
        z-index: 22;
    }

    .bobw-section__glow--book {
        bottom: 49%;
        left: -15%;
        z-index: 22;
    }

    .bobw-section__glow--top {
        top: -17%;
        left: -4%;
    }

    .bobw-section__dice--corner-1 {
        top: 2%;
        right: 3%;
        width: 11vw;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat1 10s ease-in-out infinite;
        animation-delay: -2s;
    }

    .bobw-section__dice--corner-2 {
        bottom: 69%;
        left: 5%;
        width: 17vw;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat2 12s ease-in-out infinite;
        animation-delay: -6s;
    }

    .bobw-section__dice--corner-3 {
        top: -12%;
        right: 30%;
        width: 22vw;
        height: auto;
        z-index: 25;
        animation: bobwDiceFloat1 11s ease-in-out infinite;
        animation-delay: -4s;
    }

    .bobw-section__rulebook {
        position: absolute;
        top: -22%;
        right: -3%;
        z-index: 25;
        animation: bobwBookFloat 12s ease-in-out infinite;
        animation-delay: -3s;
    }

    .bobw-section__rulebook-img {
        max-width: 33vw;
        width: auto;
        height: auto;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    }

    section.trailer-section {
        padding: 40px 0 60px;
        margin-top: -103%;
    }
}

/* ==========================================================================
   Trailer Section (Fresh Build)
   ========================================================================== */
.trailer-section {
    position: relative;
    background: #301814;
    padding: 60px 0 80px;
    text-align: center;
    margin-top: -269px;
}

.trailer-section__tagline {
    font-family: 'Elan ITC Pro', Georgia, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    color: #E2D8D2;
    max-width: 635px;
    margin: 0 auto -20px;
    /* Negative margin to bring trailer closer */
    line-height: 1.4;
    text-shadow:
        0 0 20px rgba(226, 216, 210, 0.8),
        0 0 40px rgba(228, 105, 56, 0.5),
        0 0 60px rgba(228, 105, 56, 0.3);
    position: relative;
    z-index: 99;
}

.trailer-section__player {
    position: relative;
    width: 100%;
    max-width: none;
    margin: -118px 0 0 0;
    border-radius: 0;
    overflow: hidden;
}

.trailer-section__image {
    width: 100%;
    height: auto;
    display: block;
}

.trailer-section__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.2s ease;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.trailer-section__play-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

/* ==========================================================================
   Play Button Glow & Particle Effects
   Soft fading glow behind button, drifting particles on hover
   ========================================================================== */

/* Glow Effect - Soft fade behind button */
.play-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            rgba(255, 180, 120, 0.5) 0%,
            rgba(228, 105, 56, 0.3) 25%,
            rgba(191, 65, 27, 0.15) 50%,
            rgba(255, 140, 66, 0.05) 75%,
            transparent 100%);
    filter: blur(20px);
    animation: playGlowPulse 4s ease-in-out infinite;
}

@keyframes playGlowPulse {

    0%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Idle Particles - Occasional random embers when not hovering */
.play-idle-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.play-idle-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
}

.play-idle-particle--1 {
    background: rgba(245, 167, 66, 0.9);
    box-shadow: 0 0 8px 3px rgba(245, 167, 66, 0.6);
    animation: idleParticle1 8s ease-out infinite;
}

.play-idle-particle--2 {
    background: rgba(228, 105, 56, 0.9);
    box-shadow: 0 0 8px 3px rgba(228, 105, 56, 0.6);
    animation: idleParticle2 10s ease-out infinite;
    animation-delay: 3s;
}

/* Idle particle 1 - fires occasionally, drifts up-right */
@keyframes idleParticle1 {

    0%,
    85% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    87% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(60px, -100px) scale(0.3);
        opacity: 0;
    }
}

/* Idle particle 2 - fires occasionally, drifts up-left */
@keyframes idleParticle2 {

    0%,
    80% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    82% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(-70px, -90px) scale(0.3);
        opacity: 0;
    }
}

/* Hide idle particles on hover (full effect takes over) */
.trailer-section__play-btn:hover .play-idle-particles {
    opacity: 0;
}

/* Particle Container */
.play-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.trailer-section__play-btn:hover .play-particles {
    opacity: 1;
}

.play-particles__rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

/* Individual Particles - Drifting Embers */
.play-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
}

.play-particle__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Particle 1 - drifts up-left */
.play-particle:nth-child(1) {
    animation: particleDrift1 3s ease-out infinite;
}

.play-particle:nth-child(1) .play-particle__inner {
    background: rgba(245, 167, 66, 0.9);
    box-shadow: 0 0 8px 2px rgba(245, 167, 66, 0.6);
}

/* Particle 2 - drifts up-right */
.play-particle:nth-child(2) {
    animation: particleDrift2 3.5s ease-out infinite;
    animation-delay: -0.5s;
}

.play-particle:nth-child(2) .play-particle__inner {
    background: rgba(228, 105, 56, 0.9);
    box-shadow: 0 0 8px 2px rgba(228, 105, 56, 0.6);
}

/* Particle 3 - drifts up */
.play-particle:nth-child(3) {
    animation: particleDrift3 2.8s ease-out infinite;
    animation-delay: -1s;
}

.play-particle:nth-child(3) .play-particle__inner {
    background: rgba(191, 65, 27, 0.9);
    box-shadow: 0 0 8px 2px rgba(191, 65, 27, 0.6);
}

/* Particle 4 - drifts up-left slow */
.play-particle:nth-child(4) {
    animation: particleDrift4 4s ease-out infinite;
    animation-delay: -1.5s;
}

.play-particle:nth-child(4) .play-particle__inner {
    background: rgba(255, 218, 171, 0.8);
    box-shadow: 0 0 6px 2px rgba(255, 218, 171, 0.5);
    width: 4px;
    height: 4px;
}

/* Particle 5 - drifts up-right fast */
.play-particle:nth-child(5) {
    animation: particleDrift5 2.5s ease-out infinite;
    animation-delay: -2s;
}

.play-particle:nth-child(5) .play-particle__inner {
    background: rgba(255, 140, 66, 0.9);
    box-shadow: 0 0 8px 2px rgba(255, 140, 66, 0.6);
}

/* Particle 6 - drifts straight up */
.play-particle:nth-child(6) {
    animation: particleDrift6 3.2s ease-out infinite;
    animation-delay: -2.5s;
}

.play-particle:nth-child(6) .play-particle__inner {
    background: rgba(232, 105, 48, 0.8);
    box-shadow: 0 0 6px 2px rgba(232, 105, 48, 0.5);
    width: 5px;
    height: 5px;
}

/* Particle 7 - drifts far up-left */
.play-particle:nth-child(7) {
    animation: particleDrift7 3.8s ease-out infinite;
    animation-delay: -0.8s;
}

.play-particle:nth-child(7) .play-particle__inner {
    background: rgba(255, 180, 100, 0.85);
    box-shadow: 0 0 8px 2px rgba(255, 180, 100, 0.5);
    width: 5px;
    height: 5px;
}

/* Particle 8 - drifts far right */
.play-particle:nth-child(8) {
    animation: particleDrift8 2.9s ease-out infinite;
    animation-delay: -1.8s;
}

.play-particle:nth-child(8) .play-particle__inner {
    background: rgba(228, 105, 56, 0.9);
    box-shadow: 0 0 7px 2px rgba(228, 105, 56, 0.5);
}

/* Particle 9 - drifts far up */
.play-particle:nth-child(9) {
    animation: particleDrift9 3.3s ease-out infinite;
    animation-delay: -2.2s;
}

.play-particle:nth-child(9) .play-particle__inner {
    background: rgba(245, 167, 66, 0.8);
    box-shadow: 0 0 6px 2px rgba(245, 167, 66, 0.5);
    width: 4px;
    height: 4px;
}

/* Particle 10 - drifts far left */
.play-particle:nth-child(10) {
    animation: particleDrift10 3.6s ease-out infinite;
    animation-delay: -0.3s;
}

.play-particle:nth-child(10) .play-particle__inner {
    background: rgba(191, 65, 27, 0.85);
    box-shadow: 0 0 8px 2px rgba(191, 65, 27, 0.5);
    width: 5px;
    height: 5px;
}

/* Drifting Animations - spread in ALL directions */
@keyframes particleDrift1 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(-100px, -150px) scale(0.3);
        opacity: 0;
    }
}

@keyframes particleDrift2 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(120px, -80px) scale(0.2);
        opacity: 0;
    }
}

@keyframes particleDrift3 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(20px, -180px) scale(0.4);
        opacity: 0;
    }
}

@keyframes particleDrift4 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) translate(-140px, 60px) scale(0.2);
        opacity: 0;
    }
}

@keyframes particleDrift5 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(90px, 120px) scale(0.3);
        opacity: 0;
    }
}

@keyframes particleDrift6 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) translate(-60px, 140px) scale(0.25);
        opacity: 0;
    }
}

@keyframes particleDrift7 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) translate(-150px, -40px) scale(0.2);
        opacity: 0;
    }
}

@keyframes particleDrift8 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate(140px, 90px) scale(0.35);
        opacity: 0;
    }
}

@keyframes particleDrift9 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.85;
    }

    100% {
        transform: translate(-50%, -50%) translate(40px, 160px) scale(0.2);
        opacity: 0;
    }
}

@keyframes particleDrift10 {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) translate(-120px, 100px) scale(0.3);
        opacity: 0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .play-glow,
    .play-glow::before,
    .play-particle,
    .play-idle-particle {
        animation: none;
    }

    .play-glow {
        opacity: 0.8;
    }

    .play-particles,
    .play-idle-particles {
        display: none;
    }
}

.trailer-section__play-icon {
    width: 80px;
    height: 80px;
    background: #BF411B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 20px 0 rgba(245, 160, 65, 0.50) inset,
        0 0 30px rgba(191, 65, 27, 0.6);
    position: relative;
}

.trailer-section__play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #FFDAAB;
    margin-left: 4px;
}

.trailer-section__play-text {
    font-family: 'Elan ITC Pro', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #FFDAAB;
    text-shadow:
        0 0 10px rgba(255, 218, 171, 0.5),
        0 0 20px rgba(228, 105, 56, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

.trailer-section__play-text-img {
    position: relative;
    z-index: 2;
    max-width: 180px;
    height: auto;
}

/* Trailer Section Responsive */
@media (max-width: 991px) {
    .trailer-section {
        padding: 40px 0 60px;
    }

    .trailer-section__player {
        margin: -75px 0 0 0;
    }

    .trailer-section__tagline {
        font-size: 18px;
        max-width: 90%;
        margin: 0 auto 30px;
        padding: 0 var(--spacing-md);
        justify-content: center;
        display: flex;
    }

    .trailer-section__tagline-svg {
        max-width: 90%;
        height: auto;
    }

    .trailer-section__play-btn {
        gap: 8px;
    }

    .trailer-section__play-icon {
        width: 60px;
        height: 60px;
    }

    .trailer-section__play-icon::after {
        border-width: 10px 0 10px 16px;
        margin-left: 3px;
    }

    .trailer-section__play-text {
        font-size: 14px;
        letter-spacing: 0.08em;
    }

    .trailer-section__play-text-img {
        max-width: 140px;
    }
}

@media (max-width: 480px) {
    .trailer-section {
        padding: 30px 0 5px;
    }

    .trailer-section__tagline {
        font-size: 14px;
        max-width: 95%;
        margin: 0 auto 20px;
        line-height: 1.5;
    }

    .trailer-section__tagline-svg {
        max-width: 95%;
    }

    .trailer-section__play-btn {
        gap: 6px;
    }

    .trailer-section__play-icon {
        width: 50px;
        height: 50px;
        box-shadow:
            0 0 15px 0 rgba(245, 160, 65, 0.50) inset,
            0 0 20px rgba(191, 65, 27, 0.5);
    }

    .trailer-section__play-icon::after {
        border-width: 8px 0 8px 14px;
        margin-left: 2px;
    }

    .trailer-section__play-text {
        font-size: 12px;
        letter-spacing: 0.05em;
    }

    .trailer-section__play-text-img {
        max-width: 110px;
    }
}

/* ==========================================================================
   Video/Trailer Section (Old - can be removed later)
   ========================================================================== */
.video-section {
    --video-bg-color: #F5E6D3;
    --video-accent: #E46938;
    --video-accent-light: #FF8C42;
    --video-glow: rgba(228, 105, 56, 0.6);

    position: relative;
    background: var(--video-bg-color);
    overflow: hidden;
}

.video-section__content {
    position: relative;
    padding: var(--spacing-2xl) 0;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Brush Stroke Borders */
.brush-border {
    position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
    z-index: 10;
}

.brush-border svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.brush-border--top svg {
    top: 0;
}

.brush-border--bottom svg {
    bottom: 0;
}

/* Tagline Styling */
.video-section__tagline {
    font-family: 'Elan ITC Pro', Georgia, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    color: #E2D8D2;
    text-align: center;
    max-width: 635px;
    margin: 0 auto var(--spacing-xl);
    padding: 0 var(--spacing-lg);
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-shadow:
        0 0 20px rgba(226, 216, 210, 0.5),
        0 0 40px rgba(228, 105, 56, 0.3);
    filter: drop-shadow(0 0 10px rgba(226, 216, 210, 0.3));
}

/* Video Player Container */
.video-player {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.video-player__thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #301814;
    box-shadow:
        0 20px 60px rgba(45, 24, 16, 0.5),
        0 0 60px rgba(228, 105, 56, 0.15);
}

.video-player__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center calc(50% - 50px);
    /* Shift image up 50px */
    z-index: 1;
}

.video-player__bg-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #2D1810 0%,
            #1a0f0a 30%,
            #0f0a06 60%,
            #1a0f0a 80%,
            #2D1810 100%);
    z-index: 0;
}

/* Fiery Glow Effects */
.video-player__glow {
    position: absolute;
    width: 250px;
    height: 400px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    animation: glowPulse 4s ease-in-out infinite;
}

.video-player__glow--left {
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse, var(--video-accent) 0%, rgba(255, 140, 66, 0.5) 40%, transparent 70%);
    animation-delay: 0s;
}

.video-player__glow--right {
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse, var(--video-accent-light) 0%, rgba(228, 105, 56, 0.5) 40%, transparent 70%);
    animation-delay: -2s;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-50%) scale(1.1);
    }
}

/* Corner Ember Effects */
.video-player__corner {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(ellipse, var(--video-glow) 0%, transparent 70%);
    filter: blur(30px);
    opacity: 0.8;
    z-index: 3;
    pointer-events: none;
    animation: cornerFlicker 3s ease-in-out infinite;
}

.video-player__corner--tl {
    top: -50px;
    left: -50px;
    animation-delay: 0s;
}

.video-player__corner--tr {
    top: -50px;
    right: -50px;
    animation-delay: -0.75s;
}

.video-player__corner--bl {
    bottom: -50px;
    left: -50px;
    animation-delay: -1.5s;
}

.video-player__corner--br {
    bottom: -50px;
    right: -50px;
    animation-delay: -2.25s;
}

@keyframes cornerFlicker {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    25% {
        opacity: 0.9;
        transform: scale(1.1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    75% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

/* Play Button Styles */
.video-player__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    z-index: 5;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.video-player__play-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.play-btn__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 16px));
    width: 100px;
    height: 100px;
    border: 2px solid rgba(191, 65, 27, 0.4);
    border-radius: 50%;
    animation: ringPulse 2.5s ease-out infinite;
}

.video-player__play-btn:hover .play-btn__ring {
    border-color: rgba(191, 65, 27, 0.6);
}

@keyframes ringPulse {
    0% {
        transform: translate(-50%, calc(-50% - 16px)) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, calc(-50% - 16px)) scale(1.4);
        opacity: 0;
    }
}

.play-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #BF411B;
    border-radius: 50%;
    box-shadow:
        0 0 20px 0 rgba(245, 160, 65, 0.50) inset,
        0 0 30px rgba(191, 65, 27, 0.6),
        0 0 60px rgba(228, 105, 56, 0.3);
    transition: all var(--transition-fast);
}

.video-player__play-btn:hover .play-btn__icon {
    background: #d45424;
    box-shadow:
        0 0 25px 0 rgba(245, 160, 65, 0.70) inset,
        0 0 40px rgba(191, 65, 27, 0.8),
        0 0 80px rgba(228, 105, 56, 0.4);
}

.play-btn__icon svg {
    width: 32px;
    height: 32px;
    color: #FFDAAB;
    margin-left: 4px;
    /* Visual centering for play triangle */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.play-btn__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.play-btn__text {
    font-family: 'Elan ITC Pro', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #FFDAAB;
    text-shadow:
        0 0 10px rgba(255, 218, 171, 0.5),
        0 0 20px rgba(228, 105, 56, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5);
    transition: all var(--transition-fast);
}

.video-player__play-btn:hover .play-btn__text {
    color: #FFE5C4;
    text-shadow:
        0 0 15px rgba(255, 218, 171, 0.7),
        0 0 30px rgba(228, 105, 56, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Ember Particles */
.ember-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.ember {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--video-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--video-glow);
    animation: emberFloat 8s ease-in-out infinite;
}

.ember--1 {
    left: 12%;
    bottom: 20%;
    animation-delay: 0s;
    animation-duration: 7s;
}

.ember--2 {
    left: 20%;
    bottom: 10%;
    animation-delay: -1s;
    animation-duration: 9s;
    width: 3px;
    height: 3px;
}

.ember--3 {
    left: 80%;
    bottom: 15%;
    animation-delay: -2s;
    animation-duration: 8s;
}

.ember--4 {
    left: 90%;
    bottom: 25%;
    animation-delay: -3s;
    animation-duration: 10s;
    width: 5px;
    height: 5px;
}

.ember--5 {
    left: 15%;
    bottom: 30%;
    animation-delay: -4s;
    animation-duration: 6s;
    width: 2px;
    height: 2px;
}

.ember--6 {
    left: 85%;
    bottom: 5%;
    animation-delay: -5s;
    animation-duration: 11s;
}

.ember--7 {
    left: 5%;
    bottom: 40%;
    animation-delay: -6s;
    animation-duration: 9s;
    width: 3px;
    height: 3px;
}

.ember--8 {
    left: 95%;
    bottom: 35%;
    animation-delay: -7s;
    animation-duration: 7s;
    width: 2px;
    height: 2px;
}

@keyframes emberFloat {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translateY(-200px) translateX(20px) scale(0.8);
        opacity: 0.8;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-400px) translateX(-10px) scale(0.5);
        opacity: 0;
    }
}

/* Video Section Responsive Styles */
@media (max-width: 992px) {
    .video-section__content {
        min-height: 500px;
        padding: var(--spacing-xl) 0;
    }

    .video-player {
        max-width: 700px;
    }

    .video-player__glow {
        width: 180px;
        height: 300px;
        filter: blur(60px);
    }

    .video-player__glow--left {
        left: -60px;
    }

    .video-player__glow--right {
        right: -60px;
    }

    .play-btn__icon {
        width: 80px;
        height: 80px;
    }

    .play-btn__icon svg {
        width: 40px;
        height: 40px;
    }

    .play-btn__ring {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 991px) {
    .brush-border {
        height: 60px;
    }

    .video-section__content {
        min-height: 400px;
        padding: var(--spacing-lg) 0;
    }

    .video-section__tagline {
        font-size: 1.125rem;
        margin-bottom: var(--spacing-lg);
    }

    .video-player {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .video-player__thumbnail {
        border-radius: var(--radius-md);
        box-shadow:
            0 10px 40px rgba(45, 24, 16, 0.3),
            0 0 0 2px rgba(228, 105, 56, 0.2);
    }

    .video-player__glow {
        display: none;
    }

    .video-player__corner {
        width: 100px;
        height: 100px;
        filter: blur(20px);
    }

    .play-btn__icon {
        width: 70px;
        height: 70px;
    }

    .play-btn__icon svg {
        width: 32px;
        height: 32px;
        margin-left: 4px;
    }

    .play-btn__ring {
        width: 85px;
        height: 85px;
    }

    .play-btn__text {
        font-size: 0.75rem;
    }

    .ember {
        display: none;
    }
}

@media (max-width: 480px) {
    .brush-border {
        height: 40px;
    }

    .video-section__content {
        min-height: 320px;
    }

    .video-section__tagline {
        font-size: 1rem;
        padding: 0 var(--spacing-md);
    }

    .play-btn__icon {
        width: 60px;
        height: 60px;
    }

    .play-btn__icon svg {
        width: 28px;
        height: 28px;
    }

    .play-btn__ring {
        width: 75px;
        height: 75px;
    }

    .video-player__corner {
        width: 60px;
        height: 60px;
    }
}

/* Reduced Motion Support for Video Section */
@media (prefers-reduced-motion: reduce) {

    .video-player__glow,
    .video-player__corner,
    .ember {
        animation: none;
    }

    .play-btn__ring {
        animation: none;
        opacity: 0.5;
    }

    .video-player__play-btn:hover {
        transform: translate(-50%, -50%);
    }
}

/* ==========================================================================
   Video Lightbox Modal
   Accessible, responsive video player modal
   ========================================================================== */
.video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-lightbox[hidden] {
    display: none;
}

.video-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

/* Dark backdrop with blur */
.video-lightbox__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

/* Container for video and close button */
.video-lightbox__container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    z-index: 1;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox.is-active .video-lightbox__container {
    transform: scale(1) translateY(0);
}

/* Close button */
.video-lightbox__close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.video-lightbox__close:hover,
.video-lightbox__close:focus {
    background: rgba(228, 105, 56, 0.8);
    border-color: #E46938;
    transform: scale(1.1);
    outline: none;
}

.video-lightbox__close:focus-visible {
    box-shadow: 0 0 0 3px rgba(228, 105, 56, 0.5);
}

/* Video content wrapper */
.video-lightbox__content {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 60px rgba(228, 105, 56, 0.2);
}

/* Video element */
.video-lightbox__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Custom video controls styling (browser default enhanced) */
.video-lightbox__video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Body scroll lock when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .video-lightbox__container {
        width: 95%;
    }

    .video-lightbox__close {
        top: -45px;
        right: 5px;
        width: 40px;
        height: 40px;
    }

    .video-lightbox__content {
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .video-lightbox__container {
        width: 100%;
        max-height: none;
    }

    .video-lightbox__close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.6);
    }

    .video-lightbox__content {
        border-radius: 0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .video-lightbox,
    .video-lightbox__container {
        transition: none;
    }
}

/* ==========================================================================
   You Roll, Ember Resolves Section
   ========================================================================== */
.youroll-section {
    position: relative;
    padding: 80px 0 120px;
    background: #211310;
    overflow: visible;
}

/* Section Transition SVG (fold effect at top) */
.youroll-section__transition {
    position: absolute;
    top: -90px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
}

.youroll-section__transition-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100px;
}

/* Label styling */
.youroll-section__label {
    display: block;
    color: #BA867C;
    text-align: center;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 5.4px;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 30px;
    z-index: 20;
    position: relative;
}

/* Title wrapper */
.youroll-section__title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 20;
}

.youroll-section__title-img {
    display: block;
    max-width: 659px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Description text */
.youroll-section__description {
    color: #BA867C;
    text-align: center;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    margin: 0 auto;
    max-width: 473px;
}

/* Responsive adjustments for You Roll section */
@media (max-width: 992px) {
    .youroll-section {
        padding: 60px 0 100px;
    }

    .youroll-section__label {
        font-size: 16px;
        letter-spacing: 4px;
    }

    .youroll-section__title-img {
        max-width: 550px;
    }

    .youroll-section__description {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .youroll-section {
        padding: 50px 0 80px;
    }

    .youroll-section__label {
        font-size: 14px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    .youroll-section__title {
        margin-bottom: 30px;
    }

    .youroll-section__title-img {
        max-width: 90%;
    }

    .youroll-section__description {
        font-size: 18px;
        padding: 0 20px;
    }

    .youroll-section__description br {
        display: none;
    }
}

@media (max-width: 480px) {
    .youroll-section {
        padding: 40px 0 60px;
    }

    .youroll-section__label {
        font-size: 12px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .youroll-section__title {
        margin-bottom: 25px;
    }

    .youroll-section__description {
        font-size: 16px;
        line-height: 140%;
    }

    .youroll-section__transition {
        top: -50px;
    }

    .youroll-section__title-img {
        max-width: 80%;
    }
}

/* ==========================================================================
   Kill Monsters, Not Time Section
   ========================================================================== */
.killmonsters-section {
    position: relative;
    padding-bottom: 120px;
    background: #211310;
    overflow: hidden;
}

.killmonsters-section__layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Left Content */
.killmonsters-section__content {
    flex: 0 0 40%;
    max-width: 592px;
    padding-left: 100px;
}

.killmonsters-section__icon {
    margin-bottom: 20px;
}

.killmonsters-section__icon-img {
    width: 48px;
    height: 48px;
    background-color: #DA8963;
    -webkit-mask-image: url('../images/kill-monsters/icon.svg');
    mask-image: url('../images/kill-monsters/icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.killmonsters-section__title {
    color: #9E4A39;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: -1.2px;
    margin: 0 0 24px;
}

.killmonsters-section__description {
    color: #BA867C;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    margin: 0;
    max-width: 380px;
}

/* Right Composition */
.killmonsters-section__composition {
    position: relative;
    flex: 0 0 55%;
    min-height: 500px;
}

/* Glow Effect (behind everything) */
.killmonsters-section__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.killmonsters-section__glow-img {
    width: 742px;
    height: 485px;
    object-fit: contain;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Vector decorations (behind monster) */
.killmonsters-section__vector {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.killmonsters-section__vector--1 {
    top: 30%;
    left: -5%;
}

.killmonsters-section__vector--2 {
    top: 3%;
    left: 23%;
}

.killmonsters-section__vector-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    opacity: 0.8;
    filter: brightness(1.5);
}

/* Monster Illustration */
.killmonsters-section__monster {
    position: relative;
    z-index: 2;
}

.killmonsters-section__monster-img {
    width: 100%;
    max-width: 650px;
    height: auto;
}

/* Dice */
.killmonsters-section__dice {
    position: absolute;
    z-index: 3;
}

.killmonsters-section__dice--main {
    bottom: -4%;
    left: 51%;
    animation: diceFloat 8s ease-in-out infinite;
}

.killmonsters-section__dice-img {
    width: 289px;
    height: 235px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* Blood Drop Animation */
.killmonsters-section__dice--main {
    filter: url(#blood-goo);
}

.blood-drop {
    width: 19px;
    height: 19px;
    border-radius: 0 100% 100% 100%;
    background-color: #581D10;
    opacity: 0.9;
    position: absolute;
    top: 56%;
    animation: bloodDrop 4s infinite both;
    z-index: 1;
}

.blood-drop:nth-child(2) {
    left: 15%;
    animation-delay: 0s;
}

.blood-drop:nth-child(3) {
    left: 35%;
    animation-delay: -0.8s;
}

.blood-drop:nth-child(4) {
    left: 55%;
    animation-delay: -1.6s;
}

.blood-drop:nth-child(5) {
    left: 75%;
    animation-delay: -2.4s;
}

.blood-drop:nth-child(6) {
    left: 62%;
    animation-delay: -3.2s;
}

@keyframes bloodDrop {
    0% {
        transform: translateY(0) scaleX(0.85) rotate(45deg);
        opacity: 0.9;
        animation-timing-function: ease-out;
    }

    20% {
        opacity: 0.9;
    }

    60% {
        transform: translateY(80px) scaleX(0.85) rotate(45deg);
        animation-timing-function: ease-in;
    }

    80%,
    100% {
        transform: translateY(200px) scaleX(0.85) rotate(45deg);
        opacity: 0;
    }
}

.killmonsters-section__dice--small {
    bottom: 1%;
    left: 3%;
    animation: diceFloatSmall 7s ease-in-out infinite;
    animation-delay: -2s;
}

.killmonsters-section__dice-img-small {
    width: 320px;
    height: auto;
}

@keyframes diceFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

@keyframes diceFloatSmall {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(-3deg);
    }
}

/* Stat Cards */
.killmonsters-section__stat {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 4;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.killmonsters-section__stat.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.killmonsters-section__stat--damage {
    right: -80px;
    bottom: 35%;
    transition-delay: 0.2s;
}

.killmonsters-section__stat--bleeding {
    right: -80px;
    bottom: 20%;
    transition-delay: 0.4s;
}

.killmonsters-section__stat-bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    z-index: -1;
}

.killmonsters-section__stat-bg-a,
.killmonsters-section__stat-bg-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: auto;
}

.killmonsters-section__stat-bg-a {
    opacity: 0.7;
}

.killmonsters-section__stat-bg-b {
    opacity: 1;
}

.killmonsters-section__stat-value {
    color: #E1A497;
    text-align: center;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    min-width: 50px;
}

.killmonsters-section__stat-label {
    color: #E1A497;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

/* ==========================================================================
   Loadouts, Not Slowdowns Section
   ========================================================================== */
.loadouts-section {
    position: relative;
    padding: 100px 0 120px;
    background: #211310;
    overflow: hidden;
}

.loadouts-section__layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

/* Left Composition */
.loadouts-section__composition {
    position: relative;
    flex: 0 0 50%;
    min-height: 500px;
}

/* Right Content */
.loadouts-section__content {
    flex: 0 0 40%;
    max-width: 510px;
    padding-right: 100px;
}

.loadouts-section__icon {
    margin-bottom: 20px;
}

.loadouts-section__icon-img {
    width: 48px;
    height: 48px;
    background-color: #DA8963;
    -webkit-mask-image: url('../images/loadouts/icon.svg');
    mask-image: url('../images/loadouts/icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.loadouts-section__title {
    color: #9E4A39;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: -1.2px;
    margin: 0 0 24px;
    max-width: 455px;
}

.loadouts-section__description {
    color: #BA867C;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    margin: 0;
    max-width: 380px;
}

/* Paint Background */
.loadouts-section__paint-bg {
    position: absolute;
    top: 50%;
    left: 41%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.loadouts-section__paint-img {
    width: 146%;
    max-width: 802px;
    height: auto;
}

/* Character */
.loadouts-section__character {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadouts-section__character-img {
    max-width: 579px;
    height: auto;
    transform: translate(-71px, 47px);
}

/* Inventory Items */
.loadouts-section__item {
    position: absolute;
    display: flex;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background: rgba(239, 185, 157, 0.15);
    border: 1px solid rgba(239, 185, 157, 0.35);
    box-shadow: 0 0 30px 0 rgba(237, 186, 113, 0.50);
    z-index: 3;
    aspect-ratio: 1/1;
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.loadouts-section__item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px 0 rgba(237, 186, 113, 0.70);
}

.loadouts-section__item.dragging {
    opacity: 0.7;
    cursor: grabbing;
    z-index: 100;
    transform: scale(1.1);
}

.loadouts-section__item.drag-over {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.5), 0 0 40px 0 rgba(237, 186, 113, 0.70);
}

@keyframes itemSwap {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Idle Tutorial Animation */
.loadouts-tutorial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.loadouts-tutorial.active {
    opacity: 1;
}

.loadouts-tutorial__path {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}

.loadouts-tutorial__curve {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10, 8;
    filter: drop-shadow(0 0 6px rgba(237, 186, 113, 0.9));
    fill: none;
}

.loadouts-tutorial__cursor {
    position: absolute;
    width: 32px;
    height: 32px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px rgba(237, 186, 113, 1));
    transform: translate(-4px, -4px);
    z-index: 9999;
}

.loadouts-tutorial__cursor svg {
    width: 100%;
    height: 100%;
}

.loadouts-tutorial__clone {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background: rgba(239, 185, 157, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 40px 0 rgba(237, 186, 113, 0.70);
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.loadouts-tutorial__clone.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

.loadouts-tutorial__clone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loadouts-section__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Left Column Items */
.loadouts-section__item--ring {
    top: 15%;
    left: 25%;
    padding: 0 6.968px 0 2.032px;
    align-items: center;
}

.loadouts-section__item--axe {
    top: 40%;
    left: 20%;
    padding: 0 3px 1px 0;
    align-items: center;
}

.loadouts-section__item--arrows {
    top: 65%;
    left: 25%;
    justify-content: center;
    align-items: center;
}

/* Right Column Items */
.loadouts-section__item--backpack {
    top: 15%;
    right: 25%;
    padding: 1px 14px 0 13px;
    justify-content: center;
    align-items: center;
}

.loadouts-section__item--gilet {
    top: 40%;
    right: 20%;
    padding: 0 8px 0 16px;
    justify-content: flex-end;
    align-items: center;
}

.loadouts-section__item--boot {
    top: 65%;
    right: 25%;
    padding-left: 3px;
    justify-content: flex-end;
    align-items: center;
}

/* Responsive - Loadouts Section */
@media (max-width: 992px) {
    .loadouts-section {
        padding: 80px 0 100px;
    }

    .loadouts-section__layout {
        flex-direction: column-reverse;
        text-align: center;
    }

    .loadouts-section__content {
        flex: none;
        max-width: 100%;
        padding-right: 0;
    }

    .loadouts-section__icon {
        display: flex;
        justify-content: center;
    }

    .loadouts-section__description {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .loadouts-section {
        padding: 60px 0 80px;
    }

    .loadouts-section__content {
        padding: 0 20px;
    }

    .loadouts-section__title {
        font-size: 40px;
        max-width: unset;
    }

    .loadouts-section__description {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .loadouts-section {
        padding: 40px 0 60px;
    }

    .loadouts-section__layout {
        gap: 15px;
    }

    .loadouts-section__title {
        font-size: 32px;
    }

    .loadouts-section__description {
        font-size: 16px;
    }
}

/* ==========================================================================
   Instant Loot, Zero Prep Section
   ========================================================================== */
.instaloot-section {
    position: relative;
    padding: 100px 0 120px;
    background: #211310;
    overflow: hidden;
}

.instaloot-section__layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* Left Content */
.instaloot-section__content {
    flex: 0 0 40%;
    max-width: 455px;
    padding-left: 100px;
}

.instaloot-section__icon {
    margin-bottom: 20px;
}

.instaloot-section__icon-img {
    width: 48px;
    height: 48px;
    background-color: #DA8963;
    -webkit-mask-image: url('../images/instaloot/icon.svg');
    mask-image: url('../images/instaloot/icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.instaloot-section__title {
    color: #9E4A39;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: -1.2px;
    margin: 0 0 24px;
    max-width: 371px;
}

.instaloot-section__description {
    color: #BA867C;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    margin: 0;
    max-width: 380px;
}

/* Right Composition */
.instaloot-section__composition {
    position: relative;
    flex: 1;
    aspect-ratio: 713 / 650;
    max-width: 713px;
    width: 100%;
}

/* Goblin */
.instaloot-section__goblin {
    position: absolute;
    left: -7%;
    bottom: -6.8%;
    z-index: 3;
    width: 102%;
}

.instaloot-section__goblin-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* Goblin Glow Effect */
.instaloot-section__glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(218, 137, 99, 0.6) 0%, rgba(218, 137, 99, 0.3) 30%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.instaloot-section__glow.active {
    opacity: 1;
    animation: goblinGlow 1.5s ease-in-out;
}

@keyframes goblinGlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Sparkles Container */
.instaloot-section__sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.instaloot-section__sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #FFDAAB 0%, #DA8963 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 0.8s ease-out forwards;
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: scale(0) translate(0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) translate(var(--tx, 20px), var(--ty, -20px));
    }
}

/* Loot Panel - No border */
.instaloot-section__loot-panel {
    position: absolute;
    right: 2.5%;
    top: 58%;
    transform: translateY(-50%);
    width: 36.5%;
    background: transparent;
    padding: 0;
    z-index: 4;
}

/* Loot Panel Header with Paint Splash */
.instaloot-section__loot-header {
    position: relative;
    text-align: center;
    margin-bottom: 16px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instaloot-section__header-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 243px;
    height: 46px;
    object-fit: contain;
    z-index: 1;
}

.instaloot-section__loot-title {
    position: relative;
    z-index: 2;
    color: #E1A497;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
}

/* Loot Grid (3x5) */
.instaloot-section__loot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

/* Loot Slot - No visible border */
.instaloot-section__loot-slot {
    aspect-ratio: 1;
    background: rgba(35, 25, 22, 0.9);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.instaloot-section__loot-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Empty slots - subtle, no dashed border */
.instaloot-section__loot-slot--empty {
    background: rgba(30, 20, 18, 0.6);
    border: none;
}

.instaloot-section__loot-slot--filling {
    animation: slotGlow 0.5s ease-out;
}

@keyframes slotGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(218, 137, 99, 0);
        background: rgba(35, 25, 22, 0.9);
    }

    50% {
        box-shadow: 0 0 25px 8px rgba(218, 137, 99, 0.7);
        background: rgba(218, 137, 99, 0.3);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(218, 137, 99, 0);
        background: rgba(35, 25, 22, 0.9);
    }
}

/* Counter with Paint Splash */
.instaloot-section__counter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 8px;
    height: 40px;
    padding-left: 45px;
}

.instaloot-section__counter-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 243px;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

.instaloot-section__counter-value {
    position: relative;
    z-index: 2;
    color: #E1A497;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.26px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
    transition: transform 0.3s ease;
}

.instaloot-section__counter-value.pulse {
    animation: counterPulse 0.5s ease-out;
}

@keyframes counterPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.instaloot-section__counter-label {
    position: relative;
    z-index: 2;
    color: #E1A497;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
}

/* Flying Item */
.instaloot-section__flying-item {
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: none;
}

.instaloot-section__flying-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(218, 137, 99, 0.9));
}

.instaloot-section__flying-item.flying {
    opacity: 1;
    animation: flyToSlot var(--fly-duration, 0.8s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Responsive - Instaloot Section */
@media (max-width: 992px) {
    .instaloot-section {
        padding: 80px 0 100px;
    }

    .instaloot-section__layout {
        flex-direction: column;
        text-align: center;
    }

    .instaloot-section__content {
        flex: none;
        max-width: 100%;
        padding-left: 0;
    }

    .instaloot-section__icon {
        display: flex;
        justify-content: center;
    }

    .instaloot-section__title,
    .instaloot-section__description {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .instaloot-section {
        padding: 60px 0 80px;
    }

    .instaloot-section__content {
        padding: 0 20px;
    }

    .instaloot-section__title {
        font-size: 40px;
    }

    .instaloot-section__description {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .instaloot-section {
        padding: 40px 0 60px;
    }

    .instaloot-section__title {
        font-size: 32px;
    }

    .instaloot-section__description {
        font-size: 16px;
    }

    .instaloot-section__header-bg img {
        width: 133%;
    }

    .instaloot-section__counter {
        padding-left: 7px;
    }

    .instaloot-section__counter-value {
        font-weight: 400;
        font-size: 17px;
    }
}

/* Responsive - Kill Monsters Section */
@media (max-width: 992px) {
    .killmonsters-section {
        padding: 80px 0 100px;
    }

    .killmonsters-section__layout {
        flex-direction: column;
        text-align: center;
    }

    .killmonsters-section__content {
        flex: none;
        max-width: 100%;
    }

    .killmonsters-section__icon {
        display: flex;
        justify-content: center;
    }

    .killmonsters-section__title {
        font-size: 48px;
    }

    .killmonsters-section__description {
        max-width: 100%;
        margin: 0 auto;
    }

    .killmonsters-section__composition {
        flex: none;
        width: 100%;
        min-height: 400px;
    }

    .killmonsters-section__stat--damage,
    .killmonsters-section__stat--bleeding {
        right: 5%;
    }
}

@media (max-width: 991px) {
    .killmonsters-section {
        padding: 60px 0 80px;
    }

    .killmonsters-section__content {
        padding: 0 20px;
    }

    .killmonsters-section__title {
        font-size: 40px;
    }

    .killmonsters-section__description {
        font-size: 18px;
    }

    .killmonsters-section__composition {
        min-height: 350px;
        left: 9%;
    }

    .killmonsters-section__dice-img {
        width: 280px;
        height: auto;
    }

    .killmonsters-section__stat-value {
        font-size: 22px;
    }

    .killmonsters-section__stat-label {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .killmonsters-section__stat-bg-a,
    .killmonsters-section__stat-bg-b {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .killmonsters-section {
        padding: 40px 0 60px;
    }

    .killmonsters-section__content {
        padding-left: 0;
    }

    .killmonsters-section__title {
        font-size: 32px;
    }

    .killmonsters-section__description {
        font-size: 16px;
    }

    .killmonsters-section__composition {
        min-height: 300px;
        left: 3%;
    }

    .killmonsters-section__dice-img {
        width: 338px;
        height: 107px;
    }

    .killmonsters-section__vector--1 {
        top: -3%;
    }

    .killmonsters-section__dice-img-small {
        width: 250px;
    }

    .killmonsters-section__dice--small {
        bottom: -15%;
        left: -7%;
    }

    .killmonsters-section__stat-bg-a,
    .killmonsters-section__stat-bg-b {
        width: 130px;
    }
}

/* ========================================
   INNOVATIVE GAMEPLAY SECTION
   ======================================== */

.innovative-section {
    position: relative;
    background: #301814;
    padding: 175px 0 0;
    text-align: center;
    overflow: hidden;
}

/* Paint Divider - rotated 180deg */
.innovative-section__divider {
    position: absolute;
    top: -110px;
    left: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    transform: rotate(180deg);
}

.innovative-section__divider-svg {
    width: 100%;
    display: block;
}

/* Label */
.innovative-section__label {
    display: block;
    color: #DA8963;
    text-align: center;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 5.4px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Title */
.innovative-section__title {
    text-align: center;
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
}

.innovative-section__title-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Description */
.innovative-section__description {
    color: #DA8963;
    text-align: center;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 991px) {
    .innovative-section {
        padding: 80px 0 60px;
    }

    .innovative-section__label {
        font-size: 14px;
        letter-spacing: 4px;
    }

    .innovative-section__title {
        font-size: 48px;
        letter-spacing: -1px;
    }

    .innovative-section__description {
        font-size: 18px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .innovative-section {
        padding: 80px 0 25px;
    }

    .innovative-section__divider {
        top: -30px;
    }

    .innovative-section__title-img {
        max-width: 73%;
    }
}

/* ========================================
   CLASSLESS RUNS SECTION
   ======================================== */

.classless-section {
    position: relative;
    background: #301814;
    padding: 40px 0;
    overflow: hidden;
}

.classless-section__layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Left Content */
.classless-section__content {
    flex: 0 0 40%;
    max-width: 473px;
    padding-left: 100px;
}

.classless-section__icon {
    margin-bottom: 24px;
}

.classless-section__icon-img {
    width: 42px;
    height: 42px;
}

.classless-section__title {
    color: #DA8963;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: -1.2px;
    margin: 0 0 24px;
    max-width: 393px;
}

.classless-section__description {
    color: #BB9E8D;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin: 0;
    max-width: 303px;
}

/* Right Composition */
.classless-section__composition {
    flex: 1;
    position: relative;
    aspect-ratio: 650 / 600;
    max-width: 748px;
    width: 100%;
}

/* Background wrapper with glow effect */
.classless-section__bg-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 700px;
    z-index: 1;
}

.classless-section__bg {
    width: 100%;
    height: auto;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

.classless-section__bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(206, 56, 21, 0.6) 0%, rgba(206, 56, 21, 0.3) 40%, rgba(206, 56, 21, 0) 70%);
    filter: blur(50px);
    z-index: 0;
    animation: bgGlowPulse 3s ease-in-out infinite;
}

@keyframes bgGlowPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* ==========================================================================
   DBZ-Style Power Aura System
   Multi-layered energy effect with flickering, flames, and sparks
   ========================================================================== */

.classless-section__aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 113%;
    z-index: 0;
    pointer-events: none;
}

/* Outer soft glow - large diffuse energy field */
.classless-section__aura-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 50% 60% at 50% 55%,
            rgba(206, 56, 21, 0.4) 0%,
            rgba(218, 137, 99, 0.25) 30%,
            rgba(255, 170, 112, 0.1) 50%,
            transparent 70%);
    filter: blur(40px);
    animation: auraOuterPulse 4s ease-in-out infinite;
}

/* Middle energy layer - more defined, flickering */
.classless-section__aura-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 90%;
    background: radial-gradient(ellipse 45% 55% at 50% 52%,
            rgba(255, 107, 53, 0.5) 0%,
            rgba(206, 56, 21, 0.4) 25%,
            rgba(218, 137, 99, 0.2) 50%,
            transparent 70%);
    filter: blur(25px);
    animation: auraMiddleFlicker 2.5s ease-in-out infinite;
}

/* Inner bright core - intense center energy */
.classless-section__aura-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    background: radial-gradient(ellipse 40% 50% at 50% 50%,
            rgba(255, 170, 112, 0.7) 0%,
            rgba(255, 107, 53, 0.5) 30%,
            rgba(206, 56, 21, 0.3) 60%,
            transparent 80%);
    filter: blur(15px);
    animation: auraCoreIntense 1.8s ease-in-out infinite;
}

/* Flame container */
.classless-section__aura-flames {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    overflow: visible;
}

/* Individual flame wisps */
.classless-section__flame {
    position: absolute;
    bottom: 25%;
    width: 20px;
    height: 60px;
    background: linear-gradient(to top,
            rgba(206, 56, 21, 0.8) 0%,
            rgba(255, 107, 53, 0.6) 40%,
            rgba(255, 170, 112, 0.4) 70%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(8px);
    transform-origin: center bottom;
    opacity: 0;
}

.classless-section__flame--1 {
    left: 15%;
    height: 70px;
    animation: flameRise1 3s ease-out infinite;
    animation-delay: 0s;
}

.classless-section__flame--2 {
    left: 30%;
    height: 55px;
    animation: flameRise2 2.8s ease-out infinite;
    animation-delay: 0.4s;
}

.classless-section__flame--3 {
    left: 45%;
    height: 80px;
    animation: flameRise1 3.2s ease-out infinite;
    animation-delay: 0.8s;
}

.classless-section__flame--4 {
    left: 55%;
    height: 65px;
    animation: flameRise3 2.6s ease-out infinite;
    animation-delay: 0.2s;
}

.classless-section__flame--5 {
    left: 70%;
    height: 75px;
    animation: flameRise2 3s ease-out infinite;
    animation-delay: 0.6s;
}

.classless-section__flame--6 {
    left: 85%;
    height: 50px;
    animation: flameRise3 2.9s ease-out infinite;
    animation-delay: 1s;
}

.classless-section__flame--7 {
    left: 50%;
    height: 90px;
    width: 25px;
    animation: flameRiseCentral 2.5s ease-out infinite;
    animation-delay: 0.3s;
}

/* Spark container */
.classless-section__aura-sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Individual sparks */
.classless-section__spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFAA70;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 170, 112, 0.8),
        0 0 12px 4px rgba(255, 107, 53, 0.5);
    opacity: 0;
}

.classless-section__spark--1 {
    top: 30%;
    left: 25%;
    animation: sparkBurst1 4s ease-out infinite;
    animation-delay: 0.5s;
}

.classless-section__spark--2 {
    top: 40%;
    left: 70%;
    animation: sparkBurst2 3.5s ease-out infinite;
    animation-delay: 1.2s;
}

.classless-section__spark--3 {
    top: 55%;
    left: 20%;
    animation: sparkBurst3 4.2s ease-out infinite;
    animation-delay: 2s;
}

.classless-section__spark--4 {
    top: 35%;
    left: 80%;
    animation: sparkBurst1 3.8s ease-out infinite;
    animation-delay: 0.8s;
}

.classless-section__spark--5 {
    top: 60%;
    left: 75%;
    animation: sparkBurst2 4s ease-out infinite;
    animation-delay: 1.8s;
}

/* ==========================================================================
   DBZ Aura Keyframe Animations
   ========================================================================== */

/* Outer layer - slow breathing pulse with slight distortion */
@keyframes auraOuterPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: blur(40px);
    }

    25% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1.08) rotate(0.5deg);
        filter: blur(45px);
    }

    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.15) rotate(-0.5deg);
        filter: blur(35px);
    }

    75% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.05) rotate(0.3deg);
        filter: blur(42px);
    }
}

/* Middle layer - irregular flickering */
@keyframes auraMiddleFlicker {

    0%,
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1) skewX(0deg);
    }

    12% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.05) skewX(-1deg);
    }

    25% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(0.98) skewX(0.5deg);
    }

    37% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.08) skewX(-0.5deg);
    }

    50% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.12) skewX(1deg);
    }

    62% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.02) skewX(0deg);
    }

    75% {
        opacity: 0.88;
        transform: translate(-50%, -50%) scale(1.06) skewX(-0.8deg);
    }

    87% {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.99) skewX(0.3deg);
    }
}

/* Core layer - intense rapid flicker */
@keyframes auraCoreIntense {

    0%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(15px) brightness(1);
    }

    10% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.08);
        filter: blur(12px) brightness(1.2);
    }

    20% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1.02);
        filter: blur(16px) brightness(1);
    }

    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
        filter: blur(10px) brightness(1.3);
    }

    45% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.05);
        filter: blur(14px) brightness(1.1);
    }

    55% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
        filter: blur(12px) brightness(1.15);
    }

    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.98);
        filter: blur(18px) brightness(0.95);
    }

    85% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1.12);
        filter: blur(11px) brightness(1.25);
    }
}

/* Flame animations - rising wispy motion */
@keyframes flameRise1 {
    0% {
        opacity: 0;
        transform: translateY(0) scaleY(0.5) scaleX(1) rotate(0deg);
    }

    15% {
        opacity: 0.8;
        transform: translateY(-20px) scaleY(0.9) scaleX(0.9) rotate(-3deg);
    }

    40% {
        opacity: 0.9;
        transform: translateY(-60px) scaleY(1.1) scaleX(0.8) rotate(2deg);
    }

    65% {
        opacity: 0.6;
        transform: translateY(-100px) scaleY(1.2) scaleX(0.6) rotate(-2deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-140px) scaleY(1.3) scaleX(0.3) rotate(3deg);
    }
}

@keyframes flameRise2 {
    0% {
        opacity: 0;
        transform: translateY(0) scaleY(0.4) scaleX(1) rotate(0deg);
    }

    20% {
        opacity: 0.75;
        transform: translateY(-25px) scaleY(0.85) scaleX(0.95) rotate(4deg);
    }

    45% {
        opacity: 0.85;
        transform: translateY(-55px) scaleY(1) scaleX(0.75) rotate(-3deg);
    }

    70% {
        opacity: 0.5;
        transform: translateY(-90px) scaleY(1.15) scaleX(0.5) rotate(1deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-130px) scaleY(1.25) scaleX(0.25) rotate(-2deg);
    }
}

@keyframes flameRise3 {
    0% {
        opacity: 0;
        transform: translateY(0) scaleY(0.6) scaleX(1) rotate(0deg);
    }

    10% {
        opacity: 0.7;
        transform: translateY(-15px) scaleY(0.8) scaleX(0.85) rotate(-2deg);
    }

    35% {
        opacity: 0.9;
        transform: translateY(-45px) scaleY(1.05) scaleX(0.7) rotate(3deg);
    }

    60% {
        opacity: 0.65;
        transform: translateY(-80px) scaleY(1.1) scaleX(0.55) rotate(-1deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-120px) scaleY(1.2) scaleX(0.2) rotate(2deg);
    }
}

@keyframes flameRiseCentral {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scaleY(0.5) scaleX(1);
    }

    12% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(-30px) scaleY(1) scaleX(0.9);
    }

    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(-70px) scaleY(1.2) scaleX(0.8);
    }

    55% {
        opacity: 0.75;
        transform: translateX(-50%) translateY(-120px) scaleY(1.3) scaleX(0.6);
    }

    80% {
        opacity: 0.4;
        transform: translateX(-50%) translateY(-160px) scaleY(1.35) scaleX(0.4);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-200px) scaleY(1.4) scaleX(0.2);
    }
}

/* Spark burst animations */
@keyframes sparkBurst1 {

    0%,
    85% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    88% {
        opacity: 1;
        transform: scale(1.5) translate(5px, -10px);
    }

    92% {
        opacity: 0.8;
        transform: scale(1) translate(15px, -25px);
    }

    96% {
        opacity: 0.4;
        transform: scale(0.7) translate(25px, -45px);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translate(35px, -60px);
    }
}

@keyframes sparkBurst2 {

    0%,
    80% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    84% {
        opacity: 1;
        transform: scale(1.3) translate(-8px, -15px);
    }

    90% {
        opacity: 0.7;
        transform: scale(0.9) translate(-20px, -35px);
    }

    95% {
        opacity: 0.3;
        transform: scale(0.5) translate(-30px, -55px);
    }

    100% {
        opacity: 0;
        transform: scale(0.2) translate(-40px, -70px);
    }
}

@keyframes sparkBurst3 {

    0%,
    75% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    80% {
        opacity: 1;
        transform: scale(1.4) translate(10px, -8px);
    }

    88% {
        opacity: 0.6;
        transform: scale(0.8) translate(22px, -30px);
    }

    94% {
        opacity: 0.25;
        transform: scale(0.4) translate(32px, -50px);
    }

    100% {
        opacity: 0;
        transform: scale(0.15) translate(42px, -68px);
    }
}

/* Reduced motion support for aura */
@media (prefers-reduced-motion: reduce) {

    .classless-section__aura-outer,
    .classless-section__aura-middle,
    .classless-section__aura-core {
        animation: none;
        opacity: 0.7;
    }

    .classless-section__flame,
    .classless-section__spark {
        display: none;
    }
}

/* Mobile adjustments for aura */
@media (max-width: 991px) {
    .classless-section__aura {
        width: 110%;
        height: 130%;
    }

    .classless-section__flame {
        height: 40px;
        width: 15px;
    }

    .classless-section__flame--7 {
        height: 60px;
        width: 18px;
    }

    .classless-section__aura-outer {
        filter: blur(30px);
    }

    .classless-section__aura-middle {
        filter: blur(20px);
    }

    .classless-section__aura-core {
        filter: blur(12px);
    }
}

/* Floating rock particles */
.classless-section__rocks {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.classless-section__rock {
    position: absolute;
    bottom: 0;
    opacity: 0;
    animation: rockFloat 6s ease-out infinite;
}

.classless-section__rock::before {
    content: '';
    display: block;
    background: linear-gradient(135deg, #B87850 0%, #8B5A3C 30%, #5D3A2A 70%, #3D2518 100%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    box-shadow: 0 0 8px rgba(206, 56, 21, 0.5);
}

/* Rock shape variations - irregular rocky debris */
/* Shape 1: Triangular chunk */
.classless-section__rock--shape-1::before {
    clip-path: polygon(50% 0%, 95% 75%, 5% 75%);
}

/* Shape 2: Irregular quad - jagged shard */
.classless-section__rock--shape-2::before {
    clip-path: polygon(15% 0%, 90% 20%, 100% 85%, 0% 100%);
}

/* Shape 3: Hexagonal chunk */
.classless-section__rock--shape-3::before {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Shape 4: Asymmetric wedge */
.classless-section__rock--shape-4::before {
    clip-path: polygon(30% 0%, 100% 15%, 85% 100%, 0% 80%);
}

/* Shape 5: Pointed shard */
.classless-section__rock--shape-5::before {
    clip-path: polygon(50% 0%, 80% 40%, 95% 100%, 5% 100%, 20% 40%);
}

/* Shape 6: Rough trapezoid */
.classless-section__rock--shape-6::before {
    clip-path: polygon(20% 0%, 80% 5%, 100% 100%, 0% 90%);
}

/* Rock size variations */
.classless-section__rock--sm::before {
    width: 14px;
    height: 18px;
}

.classless-section__rock--md::before {
    width: 20px;
    height: 26px;
}

.classless-section__rock--lg::before {
    width: 28px;
    height: 34px;
}

/* Default float animation */
@keyframes rockFloat {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(0) rotate(120deg);
    }
}

/* Rotation speed variations */
/* Slow spin - gentle tumble */
.classless-section__rock--spin-slow {
    animation-name: rockFloatSlowSpin;
}

@keyframes rockFloatSlowSpin {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(0) rotate(45deg);
    }
}

/* Fast spin - rapid tumbling shard */
.classless-section__rock--spin-fast {
    animation-name: rockFloatFastSpin;
}

@keyframes rockFloatFastSpin {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(0) rotate(360deg);
    }
}

/* Counter-spin - spins opposite direction */
.classless-section__rock--spin-counter {
    animation-name: rockFloatCounterSpin;
}

@keyframes rockFloatCounterSpin {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(0) rotate(-180deg);
    }
}

/* Horizontal drift variations */
/* Drift left while rising */
.classless-section__rock--drift-left {
    animation-name: rockFloatDriftLeft;
}

@keyframes rockFloatDriftLeft {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(-40px) rotate(90deg);
    }
}

/* Drift right while rising */
.classless-section__rock--drift-right {
    animation-name: rockFloatDriftRight;
}

@keyframes rockFloatDriftRight {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(40px) rotate(-90deg);
    }
}

/* Combined: fast spin + drift left */
.classless-section__rock--spin-fast.classless-section__rock--drift-left {
    animation-name: rockFloatFastDriftLeft;
}

@keyframes rockFloatFastDriftLeft {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(-35px) rotate(300deg);
    }
}

/* Combined: fast spin + drift right */
.classless-section__rock--spin-fast.classless-section__rock--drift-right {
    animation-name: rockFloatFastDriftRight;
}

@keyframes rockFloatFastDriftRight {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(35px) rotate(-300deg);
    }
}

/* Combined: slow spin + drift */
.classless-section__rock--spin-slow.classless-section__rock--drift-left {
    animation-name: rockFloatSlowDriftLeft;
}

@keyframes rockFloatSlowDriftLeft {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(-30px) rotate(30deg);
    }
}

.classless-section__rock--spin-slow.classless-section__rock--drift-right {
    animation-name: rockFloatSlowDriftRight;
}

@keyframes rockFloatSlowDriftRight {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(30px) rotate(-30deg);
    }
}

/* Counter spin + drift combinations */
.classless-section__rock--spin-counter.classless-section__rock--drift-left {
    animation-name: rockFloatCounterDriftLeft;
}

@keyframes rockFloatCounterDriftLeft {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(-25px) rotate(-150deg);
    }
}

.classless-section__rock--spin-counter.classless-section__rock--drift-right {
    animation-name: rockFloatCounterDriftRight;
}

@keyframes rockFloatCounterDriftRight {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) translateX(25px) rotate(-150deg);
    }
}

/* Magic sparkle on rocks */
.classless-section__rock::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #FFAA70;
    border-radius: 50%;
    box-shadow: 0 0 10px #DA8963, 0 0 20px #CE3815, 0 0 30px #CE3815;
    opacity: 0;
    animation: rockSparkle 6s ease-out infinite;
}

@keyframes rockSparkle {

    0%,
    15% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

/* ============================================
   Energy Rings (DBZ Power-Up Effect)
   ============================================ */

/* Container for energy rings */
.classless-section__energy-rings {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
    perspective: 600px;
}

/* Individual Energy Ring */
.classless-section__energy-ring {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(72deg);
    transform-style: preserve-3d;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    opacity: 0;
    animation: energyRingRise 2.8s ease-out forwards;
}

/* Ring glow effect - inner ring */
.classless-section__energy-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(255, 170, 112, 0.4) 0deg,
            rgba(218, 137, 99, 0.3) 60deg,
            rgba(206, 56, 21, 0.2) 120deg,
            rgba(255, 170, 112, 0.35) 180deg,
            rgba(218, 137, 99, 0.25) 240deg,
            rgba(206, 56, 21, 0.15) 300deg,
            rgba(255, 170, 112, 0.4) 360deg);
    mask: radial-gradient(transparent 62%, black 65%, black 70%, transparent 73%);
    -webkit-mask: radial-gradient(transparent 62%, black 65%, black 70%, transparent 73%);
    filter: blur(2px);
}

/* Outer glow aura */
.classless-section__energy-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            transparent 55%,
            rgba(206, 56, 21, 0.15) 65%,
            rgba(218, 137, 99, 0.1) 75%,
            rgba(255, 170, 112, 0.05) 85%,
            transparent 100%);
    filter: blur(8px);
}

/* Size variations for visual depth */
.classless-section__energy-ring--sm {
    width: 100px;
    height: 100px;
}

.classless-section__energy-ring--md {
    width: 140px;
    height: 140px;
}

.classless-section__energy-ring--lg {
    width: 180px;
    height: 180px;
}

.classless-section__energy-ring--xl {
    width: 220px;
    height: 220px;
}

/* Primary ring rise animation */
@keyframes energyRingRise {
    0% {
        opacity: 0;
        transform: translateX(-50%) rotateX(72deg) scale(0.4);
        bottom: 2%;
    }

    12% {
        opacity: 0.45;
    }

    40% {
        opacity: 0.35;
    }

    70% {
        opacity: 0.15;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) rotateX(72deg) scale(2.2);
        bottom: 55%;
    }
}

/* Alternate animation with subtle wobble */
@keyframes energyRingRiseAlt {
    0% {
        opacity: 0;
        transform: translateX(-50%) rotateX(72deg) rotateZ(0deg) scale(0.35);
        bottom: 2%;
    }

    10% {
        opacity: 0.4;
    }

    30% {
        transform: translateX(-50%) rotateX(72deg) rotateZ(3deg) scale(0.9);
    }

    50% {
        opacity: 0.3;
        transform: translateX(-50%) rotateX(72deg) rotateZ(-2deg) scale(1.3);
    }

    75% {
        transform: translateX(-50%) rotateX(72deg) rotateZ(1deg) scale(1.7);
        opacity: 0.15;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) rotateX(72deg) rotateZ(0deg) scale(2.4);
        bottom: 58%;
    }
}

/* Variation classes */
.classless-section__energy-ring--slow {
    animation: energyRingRiseAlt 3.8s ease-out forwards;
}

.classless-section__energy-ring--fast {
    animation-duration: 2s;
}

/* Intensity variations via opacity modifiers */
.classless-section__energy-ring--bright::before {
    filter: blur(0.5px);
}

.classless-section__energy-ring--bright::after {
    filter: blur(4px);
    opacity: 1.2;
}

.classless-section__energy-ring--dim::before,
.classless-section__energy-ring--dim::after {
    opacity: 0.6;
}

.classless-section__characters {
    position: relative;
    z-index: 2;
    max-width: 114%;
    height: auto;
}

/* Stat Badges */
.classless-section__stat {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 3;
    opacity: 0;
    transform: translateX(-50px) scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.classless-section__stat.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Stat Number (brighter red, shorter) */
.classless-section__stat-number {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-right: -72px;
}

.classless-section__stat-number-bg {
    width: auto;
    height: 59px;
}

.classless-section__stat-value {
    position: absolute;
    color: #E1A497;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
}

/* Stat Name (darker, longer) */
.classless-section__stat-name {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.classless-section__stat-name-bg {
    width: auto;
    height: 58px;
}

.classless-section__stat-label {
    position: absolute;
    color: #E1A497;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
}

/* Stat Positions */
.classless-section__stat--swords {
    top: 30%;
    left: 22%;
    animation-delay: 0s;
}

.classless-section__stat--mana {
    top: 45%;
    right: 14%;
    animation-delay: 0.2s;
}

.classless-section__stat--intelligence {
    bottom: 28%;
    left: 8%;
    animation-delay: 0.4s;
}

/* Floating animation after reveal */
.classless-section__stat.is-visible {
    animation: statFloat 3s ease-in-out infinite;
}

.classless-section__stat--swords.is-visible {
    animation-delay: 0s;
}

.classless-section__stat--mana.is-visible {
    animation-delay: 1s;
}

.classless-section__stat--intelligence.is-visible {
    animation-delay: 2s;
}

@keyframes statFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .classless-section__layout {
        flex-direction: column;
        text-align: center;
    }

    .classless-section__content {
        flex: none;
        max-width: 100%;
        padding-left: 0;
    }

    .classless-section__icon {
        display: flex;
        justify-content: center;
    }

    .classless-section__title {
        font-size: 42px;
    }

    .classless-section__description {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .classless-section {
        padding: 60px 0;
    }

    .classless-section__title {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .classless-section {
        padding-top: 30px;
    }

    .classless-section__layout {
        gap: 0;
    }

    .classless-section__stat--intelligence {
        display: none;
    }

    .classless-section__stat--swords {
        display: none;
    }

    .classless-section__stat--mana {
        display: none;
    }
}

/* ========================================
   EVERY TURN SECTION
   ======================================== */

.everyturn-section {
    position: relative;
    background: #301814;
    padding: 0;
    overflow: hidden;
}

.everyturn-section__layout {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Left Image Composition */
.everyturn-section__image {
    flex: 1;
    position: relative;
    aspect-ratio: 649 / 588;
    max-width: 841px;
    width: 100%;
    margin-left: 60px;
}

/* Background layer */
.everyturn-section__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.everyturn-section__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* Scene layer - absolutely positioned within aspect-ratio container */
.everyturn-section__scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.everyturn-section__scene-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Consistent positioning - both images must match */
    object-position: center center;
    display: block;
}

/* Character layer - absolutely positioned to match scene within aspect-ratio container */
.everyturn-section__character {
    position: absolute;
    top: -25px;
    left: -19px;
    width: 116%;
    height: 103%;
    z-index: 3;
    pointer-events: none;
}

.everyturn-section__character-img {
    width: 100%;
    height: 100%;
    /* CRITICAL: Must match scene-img exactly for perfect alignment */
    object-fit: contain;
    object-position: center center;
    display: block;
    /* Re-enable pointer events on the actual image */
    pointer-events: auto;
}

/* ----------------------------------------
   FLAME EFFECT SYSTEM
   ---------------------------------------- */

/* Flame container - positioned over mage's hand */
.everyturn-section__flame-container {
    position: absolute;
    top: 23%;
    left: 61%;
    width: 130px;
    height: 223px;
    z-index: 4;
    pointer-events: none;
    transform: translateX(-50%) rotate(-14deg);
}

/* Base glow - large soft ambient light */
.everyturn-section__flame-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
            rgba(206, 56, 21, 0.6) 0%,
            rgba(218, 137, 99, 0.3) 30%,
            rgba(255, 107, 53, 0.15) 50%,
            transparent 70%);
    border-radius: 50%;
    animation: flameGlowPulse 2s ease-in-out infinite;
    filter: blur(20px);
}

@keyframes flameGlowPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Flame core container */
.everyturn-section__flame-core {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 60px;
    height: 90px;
    transform: translateX(-50%);
}

/* Individual flame tongues */
.everyturn-section__flame-inner {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40px;
    height: 70px;
    background: linear-gradient(to top,
            #CE3815 0%,
            #FF6B35 30%,
            #FFAA70 60%,
            rgba(255, 220, 180, 0.8) 85%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: translateX(-50%);
    animation: flameFlicker 0.8s ease-in-out infinite;
    filter: blur(2px);
    mix-blend-mode: screen;
}

.everyturn-section__flame-inner--2 {
    width: 30px;
    height: 55px;
    left: 35%;
    animation: flameFlicker 0.6s ease-in-out infinite 0.1s;
    opacity: 0.9;
}

.everyturn-section__flame-inner--3 {
    width: 25px;
    height: 50px;
    left: 65%;
    animation: flameFlicker 0.7s ease-in-out infinite 0.2s;
    opacity: 0.85;
}

@keyframes flameFlicker {

    0%,
    100% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        opacity: 1;
    }

    25% {
        transform: translateX(-50%) scaleY(1.1) scaleX(0.95) skewX(-3deg);
        opacity: 0.95;
    }

    50% {
        transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
        opacity: 1;
    }

    75% {
        transform: translateX(-50%) scaleY(1.05) scaleX(0.98) skewX(2deg);
        opacity: 0.9;
    }
}

/* Particle container */
.everyturn-section__flame-particles {
    position: absolute;
    inset: 0;
    overflow: visible;
}

/* Ember sparks container */
.everyturn-section__embers {
    position: absolute;
    top: 0;
    left: 50%;
    width: 80px;
    height: 120px;
    transform: translateX(-50%);
}

/* Individual ember particles */
.everyturn-section__ember {
    position: absolute;
    bottom: 30%;
    width: 4px;
    height: 4px;
    background: #FFAA70;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 170, 112, 0.8);
    animation: emberRise 2.5s ease-out infinite;
    opacity: 0;
}

.everyturn-section__ember:nth-child(1) {
    left: 30%;
    animation-delay: 0s;
    animation-duration: 2.2s;
}

.everyturn-section__ember:nth-child(2) {
    left: 50%;
    animation-delay: 0.3s;
    animation-duration: 2.8s;
}

.everyturn-section__ember:nth-child(3) {
    left: 70%;
    animation-delay: 0.6s;
    animation-duration: 2.4s;
}

.everyturn-section__ember:nth-child(4) {
    left: 40%;
    animation-delay: 0.9s;
    animation-duration: 2.6s;
}

.everyturn-section__ember:nth-child(5) {
    left: 60%;
    animation-delay: 1.2s;
    animation-duration: 2.3s;
}

.everyturn-section__ember:nth-child(6) {
    left: 35%;
    animation-delay: 1.5s;
    animation-duration: 2.7s;
}

.everyturn-section__ember:nth-child(7) {
    left: 55%;
    animation-delay: 1.8s;
    animation-duration: 2.5s;
}

.everyturn-section__ember:nth-child(8) {
    left: 65%;
    animation-delay: 2.1s;
    animation-duration: 2.4s;
}

@keyframes emberRise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }

    10% {
        opacity: 1;
    }

    70% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) translateX(var(--ember-drift, 10px)) scale(0.3);
    }
}

/* Ember drift variations */
.everyturn-section__ember:nth-child(odd) {
    --ember-drift: -15px;
}

.everyturn-section__ember:nth-child(even) {
    --ember-drift: 12px;
}

.everyturn-section__ember:nth-child(3n) {
    --ember-drift: -8px;
}

/* ----------------------------------------
   HOVER INTENSIFICATION
   ---------------------------------------- */

.everyturn-section__image:hover .everyturn-section__flame-glow {
    animation: flameGlowIntense 1s ease-in-out infinite;
}

.everyturn-section__image:hover .everyturn-section__flame-inner {
    animation: flameFlickerIntense 0.4s ease-in-out infinite;
    filter: blur(1px);
}

.everyturn-section__image:hover .everyturn-section__flame-inner--2 {
    animation-delay: 0.05s;
}

.everyturn-section__image:hover .everyturn-section__flame-inner--3 {
    animation-delay: 0.1s;
}

.everyturn-section__image:hover .everyturn-section__ember {
    animation-duration: 1.5s;
}

@keyframes flameGlowIntense {

    0%,
    100% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
        filter: blur(15px);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
        filter: blur(25px);
    }
}

@keyframes flameFlickerIntense {

    0%,
    100% {
        transform: translateX(-50%) scaleY(1.1) scaleX(1);
    }

    25% {
        transform: translateX(-50%) scaleY(1.2) scaleX(0.9) skewX(-5deg);
    }

    50% {
        transform: translateX(-50%) scaleY(1) scaleX(1.1);
    }

    75% {
        transform: translateX(-50%) scaleY(1.15) scaleX(0.95) skewX(4deg);
    }
}

/* ----------------------------------------
   DYNAMIC PARTICLES (JS-generated)
   ---------------------------------------- */

.everyturn-section__particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #FFAA70 0%, #FF6B35 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat var(--particle-duration, 2s) ease-out forwards;
    opacity: 0;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 0), var(--particle-y, -80px)) scale(0.2);
    }
}

/* Spark variation */
.everyturn-section__particle--spark {
    width: 2px;
    height: 6px;
    background: linear-gradient(to top, #CE3815, #FFAA70);
    border-radius: 2px;
    animation: sparkFloat var(--particle-duration, 1.5s) ease-out forwards;
}

@keyframes sparkFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 0), var(--particle-y, -60px)) rotate(var(--particle-rotation, 45deg)) scale(0.3);
    }
}

/* Right Content */
.everyturn-section__content {
    flex: 0 0 40%;
    max-width: 473px;
    padding-right: 100px;
}

.everyturn-section__icon {
    margin-bottom: 24px;
}

.everyturn-section__icon-img {
    width: 42px;
    height: 42px;
}

.everyturn-section__title {
    color: #DA8963;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: -1.2px;
    margin: 0 0 24px;
    max-width: 393px;
}

.everyturn-section__description {
    color: #BB9E8D;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin: 0;
    max-width: 303px;
}

/* Responsive */
@media (max-width: 992px) {
    .everyturn-section__layout {
        flex-direction: column-reverse;
        text-align: center;
    }

    .everyturn-section__content {
        flex: none;
        max-width: 100%;
        padding-right: 0;
    }

    .everyturn-section__icon {
        display: flex;
        justify-content: center;
    }

    .everyturn-section__title {
        font-size: 42px;
        max-width: 100%;
    }

    .everyturn-section__description {
        font-size: 18px;
        max-width: 100%;
    }

    /* Image composition responsive - maintain alignment at tablet size */
    .everyturn-section__image {
        /* Center the composition when stacked */
        max-width: 500px;
        margin: 0 auto;
    }

    /* Flame effect responsive adjustments */
    .everyturn-section__flame-container {
        width: 100px;
        height: 150px;
    }

    .everyturn-section__flame-core {
        width: 50px;
        height: 75px;
    }

    .everyturn-section__flame-inner {
        width: 32px;
        height: 55px;
    }

    .everyturn-section__flame-inner--2 {
        width: 24px;
        height: 45px;
    }

    .everyturn-section__flame-inner--3 {
        width: 20px;
        height: 40px;
    }
}

@media (max-width: 991px) {
    .everyturn-section {
        padding: 60px 0;
    }

    .everyturn-section__content {
        padding: 0 20px;
    }

    .everyturn-section__title {
        font-size: 36px;
    }

    /* Image composition responsive - mobile */
    .everyturn-section__image {
        /* Full width on mobile with some padding consideration */
        max-width: 100%;
        width: 100%;
    }

    /* Smaller flame on mobile */
    .everyturn-section__flame-container {
        width: 80px;
        height: 120px;
    }

    .everyturn-section__flame-glow {
        filter: blur(15px);
    }

    .everyturn-section__flame-core {
        width: 40px;
        height: 60px;
    }

    .everyturn-section__flame-inner {
        width: 26px;
        height: 45px;
    }

    .everyturn-section__flame-inner--2 {
        width: 20px;
        height: 35px;
    }

    .everyturn-section__flame-inner--3 {
        width: 16px;
        height: 32px;
    }

    .everyturn-section__embers {
        width: 60px;
        height: 100px;
    }

    .everyturn-section__ember {
        width: 3px;
        height: 3px;
    }

    .everyturn-section__dice-badge {
        display: none;
    }
}

/* Small mobile - extra small screens */
@media (max-width: 480px) {
    .everyturn-section {
        padding: 0;
        margin-top: -30px;
    }

    .everyturn-section__layout {
        gap: 30px;
    }

    .everyturn-section__title {
        font-size: 28px;
    }

    .everyturn-section__description {
        font-size: 16px;
    }

    /* Image composition - small mobile */
    .everyturn-section__image {
        /* Maintain aspect ratio, fill available width */
        max-width: 100%;
        margin-top: 0;
        transform: scale(1.5);
    }

    /* Flame scales down further on small mobile */
    .everyturn-section__flame-container {
        width: 60px;
        height: 90px;
    }

    .everyturn-section__flame-core {
        width: 30px;
        height: 45px;
    }

    .everyturn-section__flame-inner {
        width: 20px;
        height: 35px;
    }

    .everyturn-section__flame-inner--2 {
        width: 15px;
        height: 28px;
    }

    .everyturn-section__flame-inner--3 {
        width: 12px;
        height: 24px;
    }

    .everyturn-section__dice-badge {
        display: none;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .everyturn-section__flame-glow,
    .everyturn-section__flame-inner,
    .everyturn-section__ember,
    .everyturn-section__particle {
        animation: none;
    }

    .everyturn-section__flame-glow {
        opacity: 0.8;
    }

    .everyturn-section__ember {
        display: none;
    }
}

/* ========================================
   INTERACTIVE DICE ROLL BADGE
   ======================================== */

/* Main badge container - positioned bottom-left of composition */
.everyturn-section__dice-badge {
    position: absolute;
    bottom: 15%;
    left: 5%;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    cursor: pointer;
}

/* Paint splash background - behind text */
.dice-badge__splash {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    width: 304px;
    height: auto;
    z-index: 1;
}

.dice-badge__splash-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* D20 Die */
.dice-badge__die {
    position: relative;
    z-index: 3;
    width: 262px;
    height: 255px;
    flex-shrink: 0;
    margin-left: -12px;
}

.dice-badge__die-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Glow effect - disabled */
.dice-badge__glow {
    display: none;
}

/* Hover states - disabled */
.dice-badge__die:hover .dice-badge__die-img {
    /* No effects */
}

.dice-badge__die:hover .dice-badge__glow {
    display: none;
}

/* Roll Now text */
.dice-badge__text {
    position: relative;
    z-index: 2;
    margin-left: -95px;
    padding: 10px 20px 10px 25px;
    color: #FFDAAB;
    text-align: center;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Roll Result Display - disabled */
.dice-badge__result {
    display: none;
}

.dice-badge__result.is-visible {
    display: none;
}

.dice-badge__result-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #CE3815 0%, #DA8963 100%);
    border-radius: 50%;
    color: #fff;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow:
        0 0 20px rgba(206, 56, 21, 0.8),
        0 0 40px rgba(255, 170, 112, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    animation: resultPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes resultPopIn {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Special result styles */
.dice-badge__result--nat20 .dice-badge__result-number {
    background: linear-gradient(135deg, #FFD700 0%, #FF8C00 50%, #CE3815 100%);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(255, 140, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    animation: resultPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        nat20Glow 0.5s ease-in-out infinite;
}

@keyframes nat20Glow {

    0%,
    100% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.9),
            0 0 60px rgba(255, 140, 0, 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow:
            0 0 50px rgba(255, 215, 0, 1),
            0 0 80px rgba(255, 140, 0, 0.8),
            inset 0 2px 4px rgba(255, 255, 255, 0.4);
    }
}

.dice-badge__result--nat1 .dice-badge__result-number {
    background: linear-gradient(135deg, #4a1a1a 0%, #8B0000 100%);
    box-shadow:
        0 0 20px rgba(139, 0, 0, 0.8),
        0 0 40px rgba(74, 26, 26, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Rolling animation state */
.dice-badge__die.is-rolling .dice-badge__die-img {
    animation: dieRoll 0.1s linear infinite;
}

.dice-badge__die.is-rolling .dice-badge__glow {
    opacity: 1;
    animation: glowIntense 0.15s ease-in-out infinite;
}

@keyframes dieRoll {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(90deg) scale(0.9);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    75% {
        transform: rotate(270deg) scale(0.95);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes glowIntense {

    0%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.3);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Landing animation - die settles after roll */
.dice-badge__die.is-landing .dice-badge__die-img {
    animation: dieLand 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes dieLand {
    0% {
        transform: rotate(720deg) scale(0.8);
    }

    50% {
        transform: rotate(360deg) scale(1.15);
    }

    70% {
        transform: rotate(380deg) scale(0.95);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Bounce particles on roll (created by JS) */
.dice-badge__particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #FFAA70 0%, #CE3815 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: particleBurst var(--particle-duration, 0.8s) ease-out forwards;
}

@keyframes particleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 50px), var(--particle-y, -50px)) scale(0);
    }
}

/* Spark particles - elongated for dynamic effect */
.dice-badge__spark {
    position: absolute;
    width: 4px;
    height: 12px;
    background: linear-gradient(to bottom, #FFD700, #FF8C00, transparent);
    border-radius: 2px;
    pointer-events: none;
    animation: sparkBurst var(--spark-duration, 0.6s) ease-out forwards;
}

@keyframes sparkBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--spark-angle, 0deg)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--spark-x, 30px), var(--spark-y, -40px)) rotate(var(--spark-angle, 0deg)) scale(0.3);
    }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .everyturn-section__dice-badge {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .dice-badge__splash {
        width: 150px;
        height: 150px;
    }

    .dice-badge__die {
        width: 70px;
        height: 70px;
    }

    .dice-badge__text {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .dice-badge__splash {
        width: 130px;
        height: 130px;
    }

    .dice-badge__die {
        width: 60px;
        height: 60px;
    }

    .dice-badge__text {
        font-size: 12px;
    }

    .dice-badge__result-number {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
}

/* Reduced motion for dice badge */
@media (prefers-reduced-motion: reduce) {

    .dice-badge__splash,
    .dice-badge__die-img,
    .dice-badge__glow,
    .dice-badge__text {
        animation: none;
    }

    .dice-badge__die:hover .dice-badge__die-img,
    .dice-badge__die:hover .dice-badge__glow {
        animation: none;
    }

    .dice-badge__die.is-rolling .dice-badge__die-img,
    .dice-badge__die.is-rolling .dice-badge__glow,
    .dice-badge__die.is-landing .dice-badge__die-img {
        animation: none;
    }

    .dice-badge__result-number {
        animation: none;
    }
}

/* ========================================
   EVERYTURN ATMOSPHERIC EFFECTS
   Fire mage scene with smoke, glow, parallax
   ======================================== */

/* ----------------------------------------
   AMBIENT GLOW - Warm light behind character
   ---------------------------------------- */
.everyturn-section__ambient-glow {
    display: none;
}

.everyturn-section__ambient-glow-inner {
    display: none;
}

.everyturn-section__ambient-glow-pulse {
    display: none;
}

@keyframes ambientGlowBreath {

    0%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes ambientPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* ----------------------------------------
   HEAT SHIMMER EFFECT - Distortion overlay
   ---------------------------------------- */
.everyturn-section__heat-shimmer {
    display: none;
}

@keyframes shimmerReveal {
    to {
        opacity: 0.4;
    }
}

/* Shimmer wave animation via pseudo-element */
.everyturn-section__heat-shimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(255, 170, 112, 0.03) 30%,
            rgba(206, 56, 21, 0.05) 50%,
            rgba(255, 170, 112, 0.03) 70%,
            transparent 100%);
    animation: heatWave 3s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Secondary shimmer layer */
.everyturn-section__heat-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 2px,
            rgba(255, 170, 112, 0.02) 2px,
            rgba(255, 170, 112, 0.02) 4px);
    animation: heatLines 8s linear infinite;
    opacity: 0.5;
}

@keyframes heatWave {

    0%,
    100% {
        transform: scaleY(1) translateY(0);
        opacity: 0.5;
    }

    25% {
        transform: scaleY(1.02) translateY(-1%);
        opacity: 0.7;
    }

    50% {
        transform: scaleY(0.98) translateY(1%);
        opacity: 0.4;
    }

    75% {
        transform: scaleY(1.01) translateY(-0.5%);
        opacity: 0.6;
    }
}

@keyframes heatLines {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

/* ----------------------------------------
   DRIFTING SMOKE/MIST PARTICLES
   ---------------------------------------- */
.everyturn-section__smoke-container {
    display: none;
}

.everyturn-section__smoke {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(ellipse at center,
            rgba(48, 24, 20, 0.6) 0%,
            rgba(48, 24, 20, 0.3) 30%,
            rgba(80, 50, 40, 0.15) 50%,
            transparent 70%);
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0;
    will-change: transform, opacity;
}

/* Smoke particle variations */
.everyturn-section__smoke--1 {
    bottom: 10%;
    left: 5%;
    width: 180px;
    height: 180px;
    animation: smokeDrift1 12s ease-in-out infinite;
    animation-delay: 0s;
}

.everyturn-section__smoke--2 {
    bottom: 20%;
    right: 10%;
    width: 220px;
    height: 160px;
    animation: smokeDrift2 15s ease-in-out infinite;
    animation-delay: 2s;
}

.everyturn-section__smoke--3 {
    bottom: 5%;
    left: 30%;
    width: 160px;
    height: 200px;
    animation: smokeDrift3 10s ease-in-out infinite;
    animation-delay: 4s;
}

.everyturn-section__smoke--4 {
    bottom: 15%;
    right: 25%;
    width: 240px;
    height: 180px;
    background: radial-gradient(ellipse at center,
            rgba(206, 56, 21, 0.08) 0%,
            rgba(48, 24, 20, 0.2) 30%,
            transparent 60%);
    animation: smokeDrift4 14s ease-in-out infinite;
    animation-delay: 1s;
}

.everyturn-section__smoke--5 {
    bottom: 0;
    left: 50%;
    width: 300px;
    height: 150px;
    transform: translateX(-50%);
    animation: smokeDrift5 18s ease-in-out infinite;
    animation-delay: 3s;
}

.everyturn-section__smoke--6 {
    bottom: 25%;
    left: 15%;
    width: 140px;
    height: 140px;
    background: radial-gradient(ellipse at center,
            rgba(218, 137, 99, 0.1) 0%,
            rgba(48, 24, 20, 0.15) 40%,
            transparent 70%);
    animation: smokeDrift6 11s ease-in-out infinite;
    animation-delay: 5s;
}

@keyframes smokeDrift1 {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.8);
    }

    10% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.6;
        transform: translate(30px, -60px) scale(1.2);
    }

    90% {
        opacity: 0.3;
    }
}

@keyframes smokeDrift2 {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.7);
    }

    15% {
        opacity: 0.35;
    }

    60% {
        opacity: 0.5;
        transform: translate(-40px, -80px) scale(1.3);
    }

    85% {
        opacity: 0.2;
    }
}

@keyframes smokeDrift3 {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.9);
    }

    20% {
        opacity: 0.5;
    }

    55% {
        opacity: 0.7;
        transform: translate(20px, -50px) scale(1.1);
    }

    80% {
        opacity: 0.25;
    }
}

@keyframes smokeDrift4 {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    10% {
        opacity: 0.3;
    }

    45% {
        opacity: 0.45;
        transform: translate(-25px, -70px) scale(1.4);
    }

    90% {
        opacity: 0.15;
    }
}

@keyframes smokeDrift5 {

    0%,
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }

    15% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.55;
        transform: translateX(-50%) translateY(-40px) scale(1.2);
    }

    85% {
        opacity: 0.2;
    }
}

@keyframes smokeDrift6 {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.75);
    }

    12% {
        opacity: 0.35;
    }

    55% {
        opacity: 0.5;
        transform: translate(35px, -55px) scale(1.15);
    }

    88% {
        opacity: 0.2;
    }
}

/* ----------------------------------------
   CAPE/CLOAK WIND EFFECT
   ---------------------------------------- */
.everyturn-section__cape-flow {
    position: absolute;
    /* Position over the cape area - adjust based on character artwork */
    bottom: 10%;
    right: 15%;
    width: 40%;
    height: 50%;
    pointer-events: none;
    /* Subtle wave distortion */
    background: transparent;
    animation: capeWave 4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes capeWave {

    0%,
    100% {
        transform: skewX(0deg) scaleX(1);
    }

    25% {
        transform: skewX(0.5deg) scaleX(1.005);
    }

    50% {
        transform: skewX(-0.3deg) scaleX(0.998);
    }

    75% {
        transform: skewX(0.4deg) scaleX(1.002);
    }
}

/* ----------------------------------------
   FLOATING EMBERS - Additional atmosphere
   ---------------------------------------- */
.everyturn-section__floating-embers {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

/* JS will generate these dynamically */
.everyturn-section__floating-ember {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #FFAA70;
    border-radius: 50%;
    box-shadow:
        0 0 4px 1px rgba(255, 170, 112, 0.8),
        0 0 8px 2px rgba(206, 56, 21, 0.4);
    opacity: 0;
    will-change: transform, opacity;
    animation: floatingEmber var(--ember-duration, 4s) ease-out forwards;
}

.everyturn-section__floating-ember--large {
    width: 4px;
    height: 4px;
    box-shadow:
        0 0 6px 2px rgba(255, 170, 112, 0.9),
        0 0 12px 4px rgba(206, 56, 21, 0.5);
}

.everyturn-section__floating-ember--small {
    width: 2px;
    height: 2px;
    box-shadow:
        0 0 3px 1px rgba(255, 170, 112, 0.7),
        0 0 6px 2px rgba(255, 107, 53, 0.3);
}

@keyframes floatingEmber {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    10% {
        opacity: 1;
        transform: translate(var(--ember-x1, 5px), var(--ember-y1, -20px)) scale(1);
    }

    60% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translate(var(--ember-x2, 15px), var(--ember-y2, -150px)) scale(0.3);
    }
}

/* ----------------------------------------
   PARALLAX LAYER TRANSITIONS
   ---------------------------------------- */
[data-parallax-layer] {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* ----------------------------------------
   HOVER STATES - Enhanced atmosphere on interaction
   ---------------------------------------- */
.everyturn-section__image:hover .everyturn-section__ambient-glow-inner {
    animation-duration: 2s;
}

.everyturn-section__image:hover .everyturn-section__ambient-glow-pulse {
    animation-duration: 3s;
}

.everyturn-section__image:hover .everyturn-section__smoke {
    filter: blur(25px);
}

/* ----------------------------------------
   RESPONSIVE - Atmospheric effects
   ---------------------------------------- */
@media (max-width: 992px) {
    .everyturn-section__ambient-glow-inner {
        filter: blur(30px);
    }

    .everyturn-section__smoke {
        filter: blur(25px);
    }

    .everyturn-section__smoke--1,
    .everyturn-section__smoke--2 {
        width: 150px;
        height: 150px;
    }

    .everyturn-section__smoke--5 {
        width: 200px;
        height: 100px;
    }
}

@media (max-width: 991px) {
    .everyturn-section__ambient-glow {
        width: 140%;
        height: 140%;
    }

    .everyturn-section__ambient-glow-inner {
        filter: blur(25px);
    }

    .everyturn-section__smoke {
        filter: blur(20px);
    }

    .everyturn-section__smoke--1,
    .everyturn-section__smoke--3 {
        width: 120px;
        height: 120px;
    }

    .everyturn-section__smoke--2,
    .everyturn-section__smoke--4 {
        width: 140px;
        height: 100px;
    }

    .everyturn-section__smoke--5 {
        width: 180px;
        height: 80px;
    }

    .everyturn-section__smoke--6 {
        width: 100px;
        height: 100px;
    }

    .everyturn-section__heat-shimmer {
        opacity: 0.2;
    }

    .everyturn-section__floating-ember {
        width: 2px;
        height: 2px;
    }
}

/* ----------------------------------------
   REDUCED MOTION - Atmospheric effects
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .everyturn-section__ambient-glow-inner,
    .everyturn-section__ambient-glow-pulse,
    .everyturn-section__smoke,
    .everyturn-section__heat-shimmer::before,
    .everyturn-section__heat-shimmer::after,
    .everyturn-section__cape-flow,
    .everyturn-section__floating-ember {
        animation: none;
    }

    .everyturn-section__ambient-glow-inner {
        opacity: 0.7;
    }

    .everyturn-section__smoke {
        opacity: 0.3;
    }

    .everyturn-section__heat-shimmer {
        display: none;
    }

    [data-parallax-layer] {
        transition: none;
    }
}

/* ========================================
   CRAFTTIME SECTION - No Downtime, All Craft Time
   ======================================== */

.crafttime-section {
    position: relative;
    background: #301814;
    padding: 0;
    overflow: hidden;
}

.crafttime-section__layout {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Left Content */
.crafttime-section__content {
    flex: 0 0 40%;
    max-width: 569px;
    padding-left: 150px;
}

.crafttime-section__icon {
    margin-bottom: 20px;
}

.crafttime-section__icon-img {
    width: 42px;
    height: 42px;
}

.crafttime-section__title {
    color: #DA8963;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: -1.2px;
    margin-bottom: 24px;
}

.crafttime-section__description {
    color: #BB9E8D;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

/* Right Image Composition */
.crafttime-section__image {
    flex: 1;
    position: relative;
    aspect-ratio: 850 / 700;
    max-width: 850px;
    width: 100%;
}

/* Glow effect */
.crafttime-section__glow {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 1;
    pointer-events: none;
}

.crafttime-section__glow-img {
    width: 100%;
    height: auto;
    opacity: 0.6;
    animation: emberHeartbeat 2.4s ease-in-out infinite;
    will-change: transform, opacity, filter;
}

/* Ember Stone Heartbeat Animation - Realistic "lub-dub... lub-dub" rhythm */
@keyframes emberHeartbeat {

    /* Rest state */
    0% {
        transform: scale(1);
        opacity: 0.6;
        filter: brightness(1) saturate(1);
    }

    /* First beat (lub) - quick strong pulse */
    8% {
        transform: scale(1.08);
        opacity: 0.85;
        filter: brightness(1.3) saturate(1.4);
    }

    /* Quick return */
    16% {
        transform: scale(1);
        opacity: 0.65;
        filter: brightness(1.05) saturate(1.1);
    }

    /* Second beat (dub) - slightly softer pulse */
    24% {
        transform: scale(1.05);
        opacity: 0.78;
        filter: brightness(1.2) saturate(1.25);
    }

    /* Return to rest */
    32% {
        transform: scale(1);
        opacity: 0.6;
        filter: brightness(1) saturate(1);
    }

    /* Long pause between heartbeats (diastole) */
    100% {
        transform: scale(1);
        opacity: 0.6;
        filter: brightness(1) saturate(1);
    }
}

/* Main craft image */
.crafttime-section__craft {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.crafttime-section__craft-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Baby Heartbeat Inside Ember Stone */
.crafttime-section__heartbeat {
    position: absolute;
    top: 35%;
    left: 48%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.3;
}

/* Core - the visible heart center */
.crafttime-heartbeat__core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle,
            rgba(255, 100, 50, 0.9) 0%,
            rgba(200, 50, 30, 0.7) 40%,
            rgba(150, 30, 20, 0.4) 70%,
            transparent 100%);
    border-radius: 50%;
    animation: babyHeartCore 0.8s ease-in-out infinite;
    box-shadow:
        0 0 15px rgba(255, 80, 40, 0.8),
        0 0 30px rgba(255, 60, 30, 0.5),
        0 0 45px rgba(200, 40, 20, 0.3);
}

/* Pulse rings that expand outward */
.crafttime-heartbeat__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 100, 50, 0.6);
    border-radius: 50%;
    animation: babyHeartPulse 0.8s ease-out infinite;
}

.crafttime-heartbeat__pulse--delayed {
    animation-delay: 0.15s;
}

/* Baby heartbeat - fast like a real baby's heart (120-160 bpm) */
@keyframes babyHeartCore {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }

    15% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 1;
    }

    30% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }

    45% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 0.95;
    }

    60% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
}

@keyframes babyHeartPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Badges */
.crafttime-section__badge {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crafttime-section__badge-bg {
    width: 100%;
    height: auto;
}

.crafttime-section__badge-text {
    position: absolute;
    color: #E1A497;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Ember Stone badge */
.crafttime-section__badge--emberstone {
    top: 37%;
    right: 7%;
    width: 280px;
    z-index: 1;
}

/* Craft Now badge */
.crafttime-section__badge--craft {
    top: 50%;
    right: 15%;
    width: 200px;
}

.crafttime-section__badge--craft .crafttime-section__badge-text {
    color: #FFDAAB;
    text-shadow: 0 0 5px #63281E, 0 0 15px #C93124, 0 0 10px #C93124;
}

/* Swirling Orbit Particles */
.crafttime-section__orbit-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    z-index: 2;
    pointer-events: none;
}

.crafttime-orbit-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #FF6B35 0%, #FF4500 50%, transparent 70%);
    box-shadow:
        0 0 6px 2px rgba(255, 107, 53, 0.8),
        0 0 12px 4px rgba(255, 69, 0, 0.5),
        0 0 20px 6px rgba(255, 69, 0, 0.3);
    transform-origin: center center;
    animation: crafttime-orbit 8s linear infinite;
}

/* Keyframe for elliptical orbit */
@keyframes crafttime-orbit {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(160px) translateY(0) rotate(0deg) scale(1);
        opacity: 0.9;
    }

    25% {
        transform: translate(-50%, -50%) rotate(90deg) translateX(160px) translateY(0) rotate(-90deg) scale(0.8);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg) translateX(160px) translateY(0) rotate(-180deg) scale(0.6);
        opacity: 0.7;
    }

    75% {
        transform: translate(-50%, -50%) rotate(270deg) translateX(160px) translateY(0) rotate(-270deg) scale(0.8);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(160px) translateY(0) rotate(-360deg) scale(1);
        opacity: 0.9;
    }
}

/* Individual particle variations - different orbit sizes, speeds, and delays */
.crafttime-orbit-particle--1 {
    animation-duration: 7s;
    animation-delay: 0s;
    width: 6px;
    height: 6px;
}

.crafttime-orbit-particle--1::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.6) 0%, transparent 70%);
}

.crafttime-orbit-particle--2 {
    animation-duration: 9s;
    animation-delay: -1.125s;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #FFD700 0%, #FF8C00 50%, transparent 70%);
    box-shadow:
        0 0 8px 3px rgba(255, 215, 0, 0.8),
        0 0 16px 6px rgba(255, 140, 0, 0.5);
}

.crafttime-orbit-particle--3 {
    animation-duration: 6s;
    animation-delay: -2s;
    width: 5px;
    height: 5px;
    animation-name: crafttime-orbit-reverse;
}

@keyframes crafttime-orbit-reverse {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(130px) translateY(0) rotate(0deg) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translate(-50%, -50%) rotate(-90deg) translateX(130px) translateY(0) rotate(90deg) scale(0.9);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) rotate(-180deg) translateX(130px) translateY(0) rotate(180deg) scale(0.7);
        opacity: 0.6;
    }

    75% {
        transform: translate(-50%, -50%) rotate(-270deg) translateX(130px) translateY(0) rotate(270deg) scale(0.9);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg) translateX(130px) translateY(0) rotate(360deg) scale(1);
        opacity: 0.8;
    }
}

.crafttime-orbit-particle--4 {
    animation-duration: 11s;
    animation-delay: -2.75s;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, #FF7F50 0%, #DC143C 50%, transparent 70%);
    box-shadow:
        0 0 6px 2px rgba(255, 127, 80, 0.8),
        0 0 12px 4px rgba(220, 20, 60, 0.5);
}

.crafttime-orbit-particle--5 {
    animation-duration: 8s;
    animation-delay: -4s;
    width: 4px;
    height: 4px;
    animation-name: crafttime-orbit-inner;
}

@keyframes crafttime-orbit-inner {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(100px) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    25% {
        transform: translate(-50%, -50%) rotate(90deg) translateX(100px) translateY(0) rotate(-90deg) scale(0.7);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg) translateX(100px) translateY(0) rotate(-180deg) scale(0.5);
        opacity: 0.6;
    }

    75% {
        transform: translate(-50%, -50%) rotate(270deg) translateX(100px) translateY(0) rotate(-270deg) scale(0.7);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(100px) translateY(0) rotate(-360deg) scale(1);
        opacity: 1;
    }
}

.crafttime-orbit-particle--6 {
    animation-duration: 10s;
    animation-delay: -5s;
    width: 9px;
    height: 9px;
    background: radial-gradient(circle, #FFA500 0%, #FF4500 50%, transparent 70%);
    box-shadow:
        0 0 8px 3px rgba(255, 165, 0, 0.9),
        0 0 16px 6px rgba(255, 69, 0, 0.6),
        0 0 24px 8px rgba(255, 69, 0, 0.3);
}

.crafttime-orbit-particle--7 {
    animation-duration: 12s;
    animation-delay: -7s;
    width: 6px;
    height: 6px;
    animation-name: crafttime-orbit-reverse;
    background: radial-gradient(circle, #FFE4B5 0%, #FFA500 50%, transparent 70%);
    box-shadow:
        0 0 6px 2px rgba(255, 228, 181, 0.8),
        0 0 12px 4px rgba(255, 165, 0, 0.5);
}

.crafttime-orbit-particle--8 {
    animation-duration: 6.5s;
    animation-delay: -3.25s;
    width: 5px;
    height: 5px;
    animation-name: crafttime-orbit-inner;
    background: radial-gradient(circle, #FF6347 0%, #B22222 50%, transparent 70%);
    box-shadow:
        0 0 5px 2px rgba(255, 99, 71, 0.8),
        0 0 10px 4px rgba(178, 34, 34, 0.5);
}

/* Responsive adjustments for orbit particles */
@media (max-width: 992px) {
    .crafttime-section__orbit-particles {
        width: 300px;
        height: 300px;
    }

    .crafttime-orbit-particle {
        animation-name: crafttime-orbit-tablet;
    }

    @keyframes crafttime-orbit-tablet {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) translateX(120px) translateY(0) rotate(0deg) scale(1);
            opacity: 0.9;
        }

        25% {
            transform: translate(-50%, -50%) rotate(90deg) translateX(120px) translateY(0) rotate(-90deg) scale(0.8);
            opacity: 1;
        }

        50% {
            transform: translate(-50%, -50%) rotate(180deg) translateX(120px) translateY(0) rotate(-180deg) scale(0.6);
            opacity: 0.7;
        }

        75% {
            transform: translate(-50%, -50%) rotate(270deg) translateX(120px) translateY(0) rotate(-270deg) scale(0.8);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg) translateX(120px) translateY(0) rotate(-360deg) scale(1);
            opacity: 0.9;
        }
    }

    .crafttime-orbit-particle--3,
    .crafttime-orbit-particle--7 {
        animation-name: crafttime-orbit-reverse-tablet;
    }

    @keyframes crafttime-orbit-reverse-tablet {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) translateX(100px) translateY(0) rotate(0deg) scale(1);
            opacity: 0.8;
        }

        25% {
            transform: translate(-50%, -50%) rotate(-90deg) translateX(100px) translateY(0) rotate(90deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translate(-50%, -50%) rotate(-180deg) translateX(100px) translateY(0) rotate(180deg) scale(0.7);
            opacity: 0.6;
        }

        75% {
            transform: translate(-50%, -50%) rotate(-270deg) translateX(100px) translateY(0) rotate(270deg) scale(0.9);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, -50%) rotate(-360deg) translateX(100px) translateY(0) rotate(360deg) scale(1);
            opacity: 0.8;
        }
    }

    .crafttime-orbit-particle--5,
    .crafttime-orbit-particle--8 {
        animation-name: crafttime-orbit-inner-tablet;
    }

    @keyframes crafttime-orbit-inner-tablet {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) translateX(75px) translateY(0) rotate(0deg) scale(1);
            opacity: 1;
        }

        25% {
            transform: translate(-50%, -50%) rotate(90deg) translateX(75px) translateY(0) rotate(-90deg) scale(0.7);
            opacity: 0.8;
        }

        50% {
            transform: translate(-50%, -50%) rotate(180deg) translateX(75px) translateY(0) rotate(-180deg) scale(0.5);
            opacity: 0.6;
        }

        75% {
            transform: translate(-50%, -50%) rotate(270deg) translateX(75px) translateY(0) rotate(-270deg) scale(0.7);
            opacity: 0.8;
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg) translateX(75px) translateY(0) rotate(-360deg) scale(1);
            opacity: 1;
        }
    }
}

@media (max-width: 991px) {
    .crafttime-section__orbit-particles {
        width: 250px;
        height: 250px;
    }

    .crafttime-orbit-particle {
        width: 4px;
        height: 4px;
    }

    .crafttime-orbit-particle--2,
    .crafttime-orbit-particle--6 {
        width: 6px;
        height: 6px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .crafttime-section__layout {
        flex-direction: column;
        text-align: center;
    }

    .crafttime-section__content {
        flex: none;
        max-width: 100%;
        padding-left: 0;
    }

    .crafttime-section__title {
        font-size: 48px;
    }
}

@media (max-width: 991px) {
    .crafttime-section {
        padding: 60px 0;
    }

    .crafttime-section__content {
        padding: 0 20px;
    }

    .crafttime-section__title {
        font-size: 40px;
    }

    .crafttime-section__description {
        font-size: 18px;
    }

    .crafttime-section__icon {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .crafttime-section {
        padding: 0;
        padding-top: 30px;
    }

    .crafttime-section__icon {
        display: flex;
        justify-content: center;
    }

    .crafttime-section__image {
        flex: 1;
        position: relative;
        aspect-ratio: 850 / 700;
        max-width: 892px;
        width: 186%;
        margin-top: -105px;
        left: -46px;
    }
}

/* ----------------------------------------
   RISING EMBER SPARKS
   Heat/sparks rising from hot crafting materials
   ---------------------------------------- */

/* Container positioned at the bottom where craft materials are */
.crafttime-section__rising-embers {
    position: absolute;
    bottom: 45%;
    left: 45%;
    transform: translateX(-50%);
    width: 320px;
    height: 280px;
    z-index: 4;
    pointer-events: none;
}

/* Individual ember spark particles */
.crafttime-rising-ember {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFD93D, #FF8C00 40%, #FF4500 70%, rgba(255, 69, 0, 0) 100%);
    box-shadow:
        0 0 6px 2px rgba(255, 140, 0, 0.8),
        0 0 12px 4px rgba(255, 69, 0, 0.5),
        0 0 20px 6px rgba(255, 107, 53, 0.3);
    opacity: 0;
    animation: crafttimeEmberRise infinite ease-out;
}

/* Vary sizes from 2px to 5px and stagger animation delays */
.crafttime-rising-ember:nth-child(1) {
    left: 18%;
    width: 4px;
    height: 4px;
    animation-duration: 3.2s;
    animation-delay: 0s;
}

.crafttime-rising-ember:nth-child(2) {
    left: 32%;
    width: 3px;
    height: 3px;
    animation-duration: 2.8s;
    animation-delay: 0.35s;
}

.crafttime-rising-ember:nth-child(3) {
    left: 48%;
    width: 5px;
    height: 5px;
    animation-duration: 3.5s;
    animation-delay: 0.7s;
}

.crafttime-rising-ember:nth-child(4) {
    left: 62%;
    width: 2px;
    height: 2px;
    animation-duration: 2.6s;
    animation-delay: 1.05s;
}

.crafttime-rising-ember:nth-child(5) {
    left: 78%;
    width: 4px;
    height: 4px;
    animation-duration: 3s;
    animation-delay: 1.4s;
}

.crafttime-rising-ember:nth-child(6) {
    left: 25%;
    width: 3px;
    height: 3px;
    animation-duration: 2.9s;
    animation-delay: 1.75s;
}

.crafttime-rising-ember:nth-child(7) {
    left: 42%;
    width: 5px;
    height: 5px;
    animation-duration: 3.3s;
    animation-delay: 2.1s;
}

.crafttime-rising-ember:nth-child(8) {
    left: 55%;
    width: 2px;
    height: 2px;
    animation-duration: 2.7s;
    animation-delay: 2.45s;
}

.crafttime-rising-ember:nth-child(9) {
    left: 72%;
    width: 4px;
    height: 4px;
    animation-duration: 3.1s;
    animation-delay: 2.8s;
}

.crafttime-rising-ember:nth-child(10) {
    left: 38%;
    width: 3px;
    height: 3px;
    animation-duration: 2.5s;
    animation-delay: 3.15s;
}

/* Horizontal drift variations using CSS custom properties for sine wave motion */
.crafttime-rising-ember:nth-child(odd) {
    --ember-drift-x: -22px;
}

.crafttime-rising-ember:nth-child(even) {
    --ember-drift-x: 18px;
}

.crafttime-rising-ember:nth-child(3n) {
    --ember-drift-x: -14px;
}

.crafttime-rising-ember:nth-child(4n) {
    --ember-drift-x: 26px;
}

.crafttime-rising-ember:nth-child(5n) {
    --ember-drift-x: -10px;
}

/* Keyframes for rising ember with sine wave horizontal drift */
@keyframes crafttimeEmberRise {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(1);
    }

    8% {
        opacity: 1;
    }

    20% {
        transform: translateY(-55px) translateX(calc(var(--ember-drift-x, 10px) * 0.6)) scale(0.95);
    }

    40% {
        opacity: 0.95;
        transform: translateY(-110px) translateX(var(--ember-drift-x, 10px)) scale(0.8);
    }

    60% {
        transform: translateY(-165px) translateX(calc(var(--ember-drift-x, 10px) * 0.4)) scale(0.6);
        opacity: 0.7;
    }

    80% {
        transform: translateY(-210px) translateX(calc(var(--ember-drift-x, 10px) * -0.3)) scale(0.4);
        opacity: 0.35;
    }

    100% {
        opacity: 0;
        transform: translateY(-260px) translateX(calc(var(--ember-drift-x, 10px) * -0.5)) scale(0.15);
    }
}

/* Color variations - some embers more orange, some more yellow-orange */
.crafttime-rising-ember:nth-child(2),
.crafttime-rising-ember:nth-child(5),
.crafttime-rising-ember:nth-child(8) {
    background: radial-gradient(circle at 30% 30%, #FFF176, #FFB300 40%, #FF6F00 70%, rgba(255, 111, 0, 0) 100%);
    box-shadow:
        0 0 6px 2px rgba(255, 179, 0, 0.8),
        0 0 12px 4px rgba(255, 111, 0, 0.5),
        0 0 20px 6px rgba(255, 152, 0, 0.3);
}

.crafttime-rising-ember:nth-child(3),
.crafttime-rising-ember:nth-child(7) {
    background: radial-gradient(circle at 30% 30%, #FFECB3, #FFC107 40%, #FF9800 70%, rgba(255, 152, 0, 0) 100%);
    box-shadow:
        0 0 6px 2px rgba(255, 193, 7, 0.8),
        0 0 12px 4px rgba(255, 152, 0, 0.5),
        0 0 20px 6px rgba(255, 183, 77, 0.3);
}

/* Responsive adjustments for rising embers */
@media (max-width: 992px) {
    .crafttime-section__rising-embers {
        width: 260px;
        height: 220px;
    }
}

@media (max-width: 991px) {
    .crafttime-section__rising-embers {
        width: 200px;
        height: 170px;
        bottom: 18%;
    }

    .crafttime-rising-ember {
        box-shadow:
            0 0 4px 1px rgba(255, 140, 0, 0.8),
            0 0 8px 2px rgba(255, 69, 0, 0.5);
    }
}

/* Reduced motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
    .crafttime-rising-ember {
        animation: none;
        opacity: 0.5;
        transform: translateY(-80px);
    }
}

/* ========================================
   JOIN THE CYCLE SECTION
   ======================================== */

.joincycle-section {
    position: relative;
    min-height: 77vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #301814 url('../images/footer/joinbg.png') no-repeat center center;
    background-size: cover;
    background-position: top;
}

.joincycle-section__content {
    text-align: center;
    max-width: 501px;
}

.joincycle-section__title {
    color: #FAF7F5;
    text-align: center;
    font-family: "Elan ITC Pro", Georgia, serif;
    font-size: 132px;
    font-style: normal;
    font-weight: 500;
    line-height: 80%;
    letter-spacing: -1.32px;
    text-transform: uppercase;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .joincycle-section__title {
        font-size: 100px;
    }
}

@media (max-width: 991px) {
    .joincycle-section {
        min-height: 105vi;
        background-size: contain;
        margin-top: -172px;
        background-position: bottom;
    }

    .joincycle-section__title {
        font-size: 72px;
    }
}

@media (max-width: 480px) {
    .joincycle-section__title {
        font-size: 56px;
    }
}

/* ========================================
   FOOTER BAR
   ======================================== */

.site-footer-bar {
    background: #1A0E0B;
    padding: 20px 0;
    height: 99px;
}

.site-footer-bar__logo {
    margin-left: 30px;
}

.site-footer-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-footer-bar__logo-img {
    width: 277px;
    height: 46px;
}

.site-footer-bar__social {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 30px;
}

.site-footer-bar__social-link {
    color: #FFFFFF;
    transition: opacity 0.3s ease;
}

.site-footer-bar__social-link:hover {
    opacity: 0.7;
}

.site-footer-bar__social-link svg {
    display: block;
}

@media (max-width: 991px) {
    .site-footer-bar {
        height: 138px;
    }

    .site-footer-bar__inner {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .site-footer-bar__logo {
        margin-left: 0;
    }
}