/* ==========================================================================
   EXPERIENCE MODE — experience.css
   Westeros-only. Loaded conditionally via base.html.

   Design tokens
   ─────────────
   Purple primary   #E040FB  /  rgba(224, 64, 251, …)
   Purple dark      #a010c8
   Gold             #d4af37  /  #c8a85a  /  #c8b07a
   Stone dark       rgba(5, 5, 10, 0.98)
   Card surface     rgba(25, 22, 30, 0.95)
   Text dim         rgba(220, 220, 220, 0.65)

   Sections
   ────────
   1.  Castle hall background
   2.  Modal overlay
   3.  Modal box (idle + success states)
   4.  Modal close button
   5.  Modal header (glyph + title)
   6.  Code input
   7.  Error message
   8.  Submit button + spinner
   9.  Hint text
   10. Page-entry animation
   11. Body modifier — experience-active
       a. Background + fog/torch overlays
       b. Layout helpers
       c. Product cards
       d. Category sections
       e. Category pills / jumper buttons
       f. Typography (realm titles, lore, markers)
   12. Exit button
   13. Seal / header lockup
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CASTLE HALL BACKGROUND
   -------------------------------------------------------------------------- */

.castle-hall {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(30, 20, 40, 0.7), rgba(5, 5, 10, 0.98)),
        url("/static/images/stone-texture.jpg") center / cover;
    background-attachment: fixed;
    overflow: hidden;
}

/* Drifting fog layer */
.castle-fog {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.05), transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.04), transparent 55%);
    animation: fogMove 18s linear infinite;
    opacity: 0.8;
    pointer-events: none;
}

@keyframes fogMove {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(-40px); }
}

/* Torchlight glow — left / right variants share one rule */
.torch-glow {
    position: absolute;
    top: 20%;
    width: 200px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 140, 60, 0.12), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.torch-glow.left  { left:  -50px; }
.torch-glow.right { right: -50px; }


/* --------------------------------------------------------------------------
   2. MODAL OVERLAY
   -------------------------------------------------------------------------- */

#experience-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);

    pointer-events: none;
    visibility: hidden;

    /* Closing: visibility delayed so box can animate out first */
    transition:
        background              0.35s ease,
        backdrop-filter         0.35s ease,
        -webkit-backdrop-filter 0.35s ease,
        visibility              0s   linear 0.35s;
}

#experience-modal.is-open {
    background: rgba(3, 1, 10, 0.88);
    backdrop-filter: blur(10px) saturate(75%);
    -webkit-backdrop-filter: blur(10px) saturate(75%);
    pointer-events: all;
    visibility: visible;

    transition:
        background              0.35s ease,
        backdrop-filter         0.35s ease,
        -webkit-backdrop-filter 0.35s ease,
        visibility              0s   linear 0s;
}


/* --------------------------------------------------------------------------
   3. MODAL BOX
   -------------------------------------------------------------------------- */

.exp-modal-box {
    position: relative;
    width: min(440px, 90vw);
    background: linear-gradient(160deg, rgba(25,22,30,0.98) 0%, rgba(10,8,12,0.98) 100%);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 20px;
    padding: 2.4rem 2rem 1.8rem;

    box-shadow:
        0 0 0 1px rgba(224, 64, 251, 0.06),
        0 24px 70px rgba(0, 0, 0, 0.75),
        0 0 80px rgba(212,175,55,0.08);

    transform: translateY(30px) scale(0.94);
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   0.28s ease;
}

#experience-modal.is-open .exp-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: expBoxPulse 3.5s ease-in-out infinite;
}

@keyframes expBoxPulse {
    0%, 100% { box-shadow:
        0 0 0 1px rgba(212,175,55,0.08),
        0 24px 70px rgba(0,0,0,0.75),
        0 0 60px rgba(212,175,55,0.08);}
    50%       { box-shadow:
        0 0 0 1px rgba(212,175,55,0.20),
        0 24px 70px rgba(0,0,0,0.75),
        0 0 120px rgba(212,175,55,0.15);}
}

/* Success state overrides */
.exp-modal-box.is-success {
    border-color: rgba(80, 220, 120, 0.45) !important;
    animation: none !important;
    box-shadow:
        0 0 0 1px rgba(80, 220, 120, 0.12),
        0 24px 70px rgba(0, 0, 0, 0.75),
        0 0  80px rgba(80, 220, 120, 0.12) !important;
}


/* --------------------------------------------------------------------------
   4. CLOSE BUTTON
   -------------------------------------------------------------------------- */

.exp-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(212,175,55,0.55);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.exp-modal-close:hover {
    background: rgba(212,175,55,0.10);
    border-color: rgba(212,175,55,0.35);
    color: #d4af37;
}


/* --------------------------------------------------------------------------
   5. MODAL HEADER — glyph + title
   -------------------------------------------------------------------------- */

.exp-modal-glyph {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
    color: #d4af37;
    text-shadow: 0 0 28px rgba(212,175,55,0.35);

    transition: color 0.4s, text-shadow 0.4s;
}

.exp-modal-box.is-success .exp-modal-glyph {
    color: #50dc78;
    text-shadow: 0 0 28px rgba(80, 220, 120, 0.55);
    animation: expGlyphPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes expGlyphPop {
    0%   { transform: scale(0.6); opacity: 0.4; }
    60%  { transform: scale(1.35); }
    100% { transform: scale(1);   opacity: 1;  }
}

.exp-modal-title {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(212,175,55,0.75);
    margin: 0 0 1.6rem;
    transition: color 0.4s;
}

.exp-modal-box.is-success .exp-modal-title {
    color: rgba(160, 240, 190, 0.75);
}


/* --------------------------------------------------------------------------
   6. CODE INPUT
   -------------------------------------------------------------------------- */

.exp-code-input {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212,175,55,0.20);
    border-radius: 10px;
    padding: 0.9rem 1rem;

    color: rgba(255,255,255,0.90);
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
    caret-color: #d4af37;

    outline: none;
    transition: border-color 0.22s, box-shadow 0.22s;
}

.exp-code-input::placeholder {
    color: rgba(220,220,220,0.25);
    letter-spacing: 0.14em;
    font-size: 0.95rem;
}

.exp-code-input:focus {
    border-color: rgba(212,175,55,0.55);
    box-shadow:
        0 0 0 3px rgba(212,175,55,0.08),
        0 0 20px rgba(212,175,55,0.08);
}

.exp-code-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.exp-code-input.shake {
    animation: expShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes expShake {
    0%, 100% { transform: translateX(0);   }
    15%       { transform: translateX(-8px); }
    30%       { transform: translateX( 7px); }
    45%       { transform: translateX(-6px); }
    60%       { transform: translateX( 5px); }
    75%       { transform: translateX(-3px); }
    90%       { transform: translateX( 2px); }
}


/* --------------------------------------------------------------------------
   7. ERROR MESSAGE
   -------------------------------------------------------------------------- */

.exp-error {
    min-height: 1.3em;
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    text-align: center;
    color: #ff7a92;
    letter-spacing: 0.02em;

    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.exp-error.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --------------------------------------------------------------------------
   8. SUBMIT BUTTON + SPINNER
   -------------------------------------------------------------------------- */

.exp-submit-btn {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 1.2rem;
    padding: 0.88rem 1rem;
    overflow: hidden;

    background: linear-gradient(135deg, #d4af37 0%, #b9962d 100%);

    color: #111;
    border: none;
    border-radius: 10px;

    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;

    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
}

/* Hover sheen */
.exp-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.2s;
}

.exp-submit-btn:hover:not(:disabled)::before { opacity: 1; }

.exp-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212,175,55,0.35);
}

.exp-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(212,175,55,0.25);
}

.exp-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Text / loader swap */
.exp-btn-text   { transition: opacity 0.15s; }

.exp-btn-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.exp-submit-btn.is-loading .exp-btn-text   { opacity: 0; }
.exp-submit-btn.is-loading .exp-btn-loader { opacity: 1; }

/* Spinner */
.exp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: expSpin 0.72s linear infinite;
}

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


/* --------------------------------------------------------------------------
   9. HINT TEXT
   -------------------------------------------------------------------------- */

.exp-modal-hint {
    margin-top: 1.1rem;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220,220,220,0.25);
}


/* --------------------------------------------------------------------------
   10. PAGE-ENTRY ANIMATION
   Fires once on the reload immediately after activation.
   -------------------------------------------------------------------------- */

body.experience-entering {
    animation: expPageEnter 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes expPageEnter {
    0%   { opacity: 0; filter: brightness(0.1) saturate(0)   blur(4px); }
    55%  { opacity: 1; filter: brightness(1.05) saturate(1.1) blur(0);  }
    100% { opacity: 1; filter: brightness(1)   saturate(1)   blur(0);  }
}


/* --------------------------------------------------------------------------
   11. BODY MODIFIER — experience-active
   -------------------------------------------------------------------------- */

/* 11a. Background + atmospheric overlays ---------------------------------- */

body.experience-active {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(30, 20, 40, 0.7), rgba(5, 5, 10, 0.98)),
        url("/static/images/stone-texture.jpg") center / cover;
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Fog — fixed so it covers the whole viewport regardless of scroll */
body.experience-active::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.05), transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.04), transparent 55%);
    animation: fogMove 18s linear infinite;
    opacity: 0.8;
}

/* Torchlight — fixed warm glow at top-left / top-right corners */
body.experience-active::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 140, 60, 0.12), transparent 70%),
        radial-gradient(circle at 90% 20%, rgba(255, 140, 60, 0.12), transparent 70%);
    filter: blur(20px);
}


/* 11b. Layout helpers ----------------------------------------------------- */

/* Content sits above the fixed overlays */
body.experience-active .container {
    max-width: 1200px;
    position: relative;
    z-index: 2;
}

.westeros-experience-mode {
    position: relative;
    z-index: 2;
}

/* Visibility toggles */
.experience-exclusive {
    display: none !important;
}

body.experience-active .experience-exclusive {
    display: block !important;
}

body.experience-active .experience-hidden {
    display: none !important;
}

/* Unified experience grid */
body.experience-active .experience-unified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

body.experience-active .experience-unified-grid .featured-item {
    display: flex;
}

body.experience-active .experience-unified-grid .product-card,
body.experience-active .experience-card {
    flex: 1;
    width: 100%;
    height: 100%;
}

body.experience-active .products-grid {
    gap: 22px;
}


/* 11c. Product cards ------------------------------------------------------- */

body.experience-active .product-card {
    background: linear-gradient(145deg, rgba(25, 22, 30, 0.95), rgba(12, 10, 16, 0.98));
    border: 1px solid rgba(140, 120, 90, 0.12);
    border-radius: 10px;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.experience-active .product-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow:
        0 0  25px rgba(212, 175, 55, 0.08),
        0 18px 40px rgba(0, 0, 0, 0.7);
}

body.experience-active .product-image-wrapper img {
    filter: contrast(1.05) brightness(0.85) saturate(0.9);
    transition: filter 0.4s ease;
}

body.experience-active .product-card:hover img {
    filter: contrast(1.1) brightness(1.0) saturate(1.1);
}


/* 11d. Category sections --------------------------------------------------- */

body.experience-active .menu-category-section {
    background: linear-gradient(180deg, rgba(20, 18, 25, 0.85), rgba(10, 8, 12, 0.92));
    border: 1px solid rgba(140, 120, 90, 0.15);
    border-radius: 14px;
    padding: 30px 18px;
    margin-bottom: 50px;
    position: relative;

    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.6),
        0 20px 60px rgba(0, 0, 0, 0.6);

    animation: realmFade 0.8s ease both;
}

/* Inner gold border accent */
body.experience-active .menu-category-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.08);
    pointer-events: none;
}

@keyframes realmFade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* 11e. Category pills / jumper buttons ------------------------------------ */

body.experience-active .jumper-btn {
    background: rgba(20, 18, 25, 0.85) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: #c8b07a !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

body.experience-active .jumper-btn.active {
    background: rgba(212, 175, 55, 0.12) !important;
    border-color: #d4af37 !important;
    color: #fff !important;
}


/* 11f. Typography ---------------------------------------------------------- */

body.experience-active .realm-title {
    font-family: "Cinzel", serif;
    color: #d4af37;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
    letter-spacing: 0.15em;
}

body.experience-active .realm-lore {
    color: rgba(220, 220, 220, 0.65);
    font-style: italic;
}

/* Shared lore style (also used outside experience-active scope) */
.realm-lore {
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.65;
    margin: 8px auto 0;
    max-width: 600px;
}

/* Decorative gold divider line */
.realm-marker {
    width: 120px;
    height: 1px;
    margin: 20px auto;
    background: linear-gradient(90deg, transparent, #c8a85a, transparent);
    opacity: 0.6;
}

/* Realm header block (used above category lists) */
.realm-header {
    text-align: center;
    margin-bottom: 40px;
}

.realm-subtitle {
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    opacity: 0.6;
}


/* --------------------------------------------------------------------------
   12. EXIT BUTTON
   -------------------------------------------------------------------------- */

.experience-exit-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.experience-exit-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(10, 8, 20, 0.75);
    color: #fff;
    backdrop-filter: blur(10px);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.experience-exit-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}


/* --------------------------------------------------------------------------
   13. REALM HEADER LOCKUP (horizontal seal + subtitle)
   -------------------------------------------------------------------------- */

.realm-header-lockup {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.realm-seal {
    font-size: 2rem;
    color: rgba(212, 175, 55, 0.35);
    line-height: 1;
    animation: sealFloat 4s ease-in-out infinite;
}

@keyframes sealFloat {
    0%, 100% { transform: translateY(0);   opacity: 0.25; }
    50%       { transform: translateY(-4px); opacity: 0.45; }
}