/**
FileName: assets/css/restriction.css
Version: 0.9.0
Written based on the version: 0.8.0
Purpose: Restriction states — teaser mode + tier-locked messages + gate
Decision Log:
  0.9.0 NEW: Dark-mode-safe locked message and gate colors via tokens
  0.9.0 FIX: Gate local brand colors now inherit semantic tokens
Dependencies: tokens.css, components.css
Impact Map: Restricted content
Used By: class-restriction.php, tpl-restricted-content.php
Namespace-location: CSS classes
Owner: A-SUN Studio
*/

.asun-teaser {
    position: relative;
    overflow: hidden;
}

.asun-teaser>p:first-child {
    margin-bottom: var(--spacing-md);
}

.asun-teaser .asun-gate {
    margin-top: var(--spacing-md);
}

/* Locked message container */
.asun-locked-message {
    background: var(--surface-muted);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-asymmetric);
    padding: var(--spacing-xl);
    text-align: center;
    margin: var(--spacing-lg) 0;
    color: var(--text-primary);
}

.asun-locked-message .asun-locked-icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
}

.asun-locked-message .asun-locked-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.asun-locked-message .asun-locked-tiers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.asun-locked-message .asun-locked-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Tier-locked specific styles */
.asun-locked-message.is-tier-explorer {
    border-color: var(--tier-explorer);
}

.asun-locked-message.is-tier-architect {
    border-color: var(--tier-architect);
}

.asun-locked-message.is-tier-builder {
    border-color: var(--tier-builder);
}

/* ===== A-SUN Gate ===== */
.asun-gate {
    --p: var(--color-primary);
    --a: var(--color-accent);
    --sun1: #e0a458;
    --sun2: #d96c57;
    --sun3: #4d8ea4;
    --sun4: #c96a82;
    --sun5: #6a994e;
    --sun6: #8e6bb0;

    position: relative;
    isolation: isolate;
    padding: 2rem 1.5rem;
    margin: 2rem 0;
    text-align: center;
    color: inherit;
    background: var(--surface-muted);
    background: color-mix(in srgb, currentColor 6%, transparent);
    border-radius: 0 15px 0 15px;
    border-start-start-radius: 15px;
    border-start-end-radius: 0;
    border-end-end-radius: 15px;
    border-end-start-radius: 0;
}

@property --asun-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.asun-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: inherit;
    background: conic-gradient(from var(--asun-angle),
            transparent 0%,
            var(--p) 8%,
            var(--a) 16%,
            transparent 24%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: asun-sweep 13s linear infinite;
    z-index: 1;
    pointer-events: none;
}

.asun-gate::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px dashed currentColor;
    opacity: 0.3;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

@keyframes asun-sweep {
    to {
        --asun-angle: 360deg;
    }
}

.asun-gate h5 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: inherit;
}

.asun-gate p,
.asun-gate .asun-gate-intro,
.asun-gate .catalog-intro {
    margin: 0.75rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.asun-gate .cta {
    display: inline-block;
    background: var(--p);
    color: var(--text-on-primary);
    padding: 0.75rem 3rem;
    text-decoration: none;
    border-radius: 0 7px 0 7px;
    border-start-start-radius: 7px;
    border-start-end-radius: 0;
    border-end-end-radius: 7px;
    border-end-start-radius: 0;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s, background 0.25s;
}

.asun-gate .cta:hover {
    transform: translateY(-2px);
    background: var(--color-primary-dark);
    color: var(--text-on-primary);
    box-shadow: 0 4px 12px var(--surface-primary-soft);
}

.asun-gate .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.asun-gate .sun-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.asun-gate .sun {
    display: inline-block;
    vertical-align: middle;
    width: 2.8em;
    height: 2.8em;
}

.asun-gate .sun .spin {
    transform-box: view-box;
    transform-origin: center;
    animation: asun-spin 13s linear infinite;
}

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

.asun-gate .tagline {
    font-family: var(--font-en);
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 600;
    opacity: 0.75;
}

.asun-gate .tagline a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.asun-gate .tagline a:hover {
    opacity: 0.6;
}

.asun-gate .studio-note {
    max-width: 26em;
    font-size: 0.8rem;
    line-height: 1.7;
    text-align: start;
    margin: 0;
}

.asun-gate .required-plans {
    display: inline-block;
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
    background: var(--surface-primary-soft);
    background: color-mix(in srgb, var(--p) 15%, transparent);
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
}

.asun-gate a:not(.cta):not(.sun-link):not(.tagline a) {
    color: var(--a);
    color: color-mix(in srgb, var(--a) 70%, currentColor);
    text-decoration: underline;
    font-weight: 500;
}

@media (max-width: 767px) {
    .asun-gate .actions {
        flex-wrap: nowrap;
    }

    .asun-gate .tagline {
        flex: 25 1 0;
        min-width: 0;
    }

    .asun-gate .sun-link {
        flex: 15 1 0;
        min-width: 0;
        justify-content: center;
    }

    .asun-gate .studio-note {
        max-width: 26em;
        font-size: 0.8rem;
        line-height: 1.7;
        text-align: start;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .asun-gate::before,
    .asun-gate .sun .spin {
        animation: none;
    }

    .asun-gate .cta {
        transition: none;
    }
}