/* ============================================
   MasqproT.com - Masquerade Protocol
   Street-Style Meets Ceremonial Theater
   ============================================ */

/* --- Color Variables --- */
:root {
    --terracotta: #C1694F;
    --deep-terracotta: #8B4332;
    --amber: #D4943A;
    --charcoal: #2A2220;
    --deep-night: #1A1412;
    --warm-chalk: #F5F0EB;
    --crystal-frost: #E8D5C4;
    --mask-gold: #C9A84C;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--charcoal);
    background-color: var(--warm-chalk);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Noise Texture Pseudo-element Mixin --- */
.noise-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: url(#noise-filter);
    mix-blend-mode: overlay;
    opacity: 0.1;
    z-index: 1;
}

/* ============================================
   GHOST WORDS (stencil background text)
   ============================================ */
.ghost-word {
    position: absolute;
    font-family: 'Bebas Neue', cursive;
    font-size: 18rem;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
    letter-spacing: 0.08em;
}

.ghost-word--1 {
    top: 10vh;
    left: -5vw;
    transform: rotate(-3deg);
}

.ghost-word--2 {
    top: 55vh;
    left: 15vw;
    transform: rotate(2deg);
    font-size: 14rem;
}

.ghost-word--3 {
    top: 20%;
    right: -10vw;
    transform: rotate(-2deg);
    font-size: 16rem;
}

.ghost-word--4 {
    top: 10%;
    left: -8vw;
    transform: rotate(3deg);
    font-size: 20rem;
}

.ghost-word--5 {
    top: 30%;
    left: 10vw;
    transform: rotate(-1deg);
    font-size: 12rem;
    opacity: 0.04;
}

/* ============================================
   HERO: THE MASK WALL
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background-color: var(--warm-chalk);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 6vw;
    padding-right: 3vw;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(var(--charcoal) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* --- Sentinel Mask --- */
.sentinel-mask {
    position: absolute;
    top: 50%;
    left: 6vw;
    transform: translateY(-50%);
    width: min(50vw, 500px);
    height: min(65vh, 650px);
    z-index: 2;
}

.sentinel-svg {
    width: 100%;
    height: 100%;
}

.mask-facet {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.3s ease;
}

/* Terracotta/amber color spectrum for facets */
.mask-facet:nth-child(8n+1) { fill: var(--terracotta); }
.mask-facet:nth-child(8n+2) { fill: var(--deep-terracotta); }
.mask-facet:nth-child(8n+3) { fill: var(--amber); }
.mask-facet:nth-child(8n+4) { fill: var(--crystal-frost); }
.mask-facet:nth-child(8n+5) { fill: var(--terracotta); opacity: 0.9; }
.mask-facet:nth-child(8n+6) { fill: var(--mask-gold); }
.mask-facet:nth-child(8n+7) { fill: var(--deep-terracotta); opacity: 0.85; }
.mask-facet:nth-child(8n) { fill: var(--amber); opacity: 0.9; }

.mask-facet--eye {
    fill: var(--deep-night) !important;
    opacity: 0;
}

.mask-facet.assembled {
    opacity: 1;
}

.mask-facet.split-left {
    animation: splitLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.mask-facet.split-right {
    animation: splitRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes splitLeft {
    to {
        transform: translateX(-120%) rotate(-15deg);
        opacity: 0;
    }
}

@keyframes splitRight {
    to {
        transform: translateX(120%) rotate(15deg);
        opacity: 0;
    }
}

/* --- Mask Crack Line --- */
.mask-crack {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 0;
}

.mask-crack.drawing {
    opacity: 1;
    animation: drawCrack 0.8s ease-in-out forwards;
}

@keyframes drawCrack {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Hero Title --- */
.hero-title {
    position: absolute;
    top: 50%;
    left: 6vw;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-title.visible {
    opacity: 1;
}

.hero-title__main {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal);
    line-height: 0.9;
}

.hero-title__sub {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--terracotta);
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
}

/* --- Scroll Shard --- */
.scroll-shard {
    position: absolute;
    bottom: 3rem;
    left: 6vw;
    z-index: 5;
    animation: shardBob 2s ease-in-out infinite;
}

.shard-svg {
    width: 24px;
    height: 40px;
}

@keyframes shardBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* ============================================
   TAG LINE BANDS (F-Scan Bands)
   ============================================ */
.tagline-band {
    position: relative;
    width: 100%;
    padding: 3rem 0;
    overflow: hidden;
    z-index: 2;
}

.tagline-band--1 {
    background-color: var(--terracotta);
    margin-top: 0;
}

.tagline-band--2 {
    background-color: var(--deep-terracotta);
}

/* Rough edges via clip-path */
.tagline-band::before,
.tagline-band::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 8px;
    z-index: 2;
}

.tagline-band::before {
    top: -4px;
    background: linear-gradient(
        90deg,
        var(--warm-chalk) 0%,
        transparent 3%,
        var(--warm-chalk) 5%,
        transparent 8%,
        var(--warm-chalk) 10%,
        transparent 14%,
        var(--warm-chalk) 16%,
        transparent 22%,
        var(--warm-chalk) 25%,
        transparent 30%,
        var(--warm-chalk) 33%,
        transparent 38%,
        var(--warm-chalk) 42%,
        transparent 48%,
        var(--warm-chalk) 52%,
        transparent 56%,
        var(--warm-chalk) 60%,
        transparent 65%,
        var(--warm-chalk) 70%,
        transparent 75%,
        var(--warm-chalk) 78%,
        transparent 83%,
        var(--warm-chalk) 86%,
        transparent 90%,
        var(--warm-chalk) 94%,
        transparent 97%,
        var(--warm-chalk) 100%
    );
}

.tagline-band::after {
    bottom: -4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--warm-chalk) 2%,
        transparent 6%,
        var(--warm-chalk) 9%,
        transparent 15%,
        var(--warm-chalk) 18%,
        transparent 24%,
        var(--warm-chalk) 28%,
        transparent 34%,
        var(--warm-chalk) 37%,
        transparent 42%,
        var(--warm-chalk) 46%,
        transparent 50%,
        var(--warm-chalk) 54%,
        transparent 58%,
        var(--warm-chalk) 63%,
        transparent 68%,
        var(--warm-chalk) 72%,
        transparent 76%,
        var(--warm-chalk) 80%,
        transparent 85%,
        var(--warm-chalk) 88%,
        transparent 92%,
        var(--warm-chalk) 95%,
        transparent 98%,
        var(--warm-chalk) 100%
    );
}

.tagline-band__inner {
    padding-left: 6vw;
    padding-right: 3vw;
}

.tagline-band__text {
    font-family: 'Bebas Neue', cursive;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--warm-chalk);
    line-height: 1.1;
}

/* Stencil reveal per character */
.tagline-band__text .char {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.tagline-band__text .char.revealed {
    clip-path: inset(0 0 0 0);
}

/* ============================================
   BRIDGE SECTION (between tag bands)
   ============================================ */
.bridge-section {
    position: relative;
    padding: 8rem 3vw 8rem 6vw;
    background-color: var(--warm-chalk);
    overflow: hidden;
    transition: background-color 0.8s ease;
}

.bridge-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(var(--charcoal) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

.bridge-content {
    position: relative;
    max-width: 640px;
    z-index: 2;
}

.bridge-text {
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--charcoal);
}

/* Fragment mask on right edge */
.fragment-mask {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.fragment-mask--right {
    top: 10%;
    right: -40px;
    width: 200px;
    height: 400px;
    opacity: 0.6;
}

.fragment-svg {
    width: 100%;
    height: 100%;
}

.fragment-svg .mask-facet:nth-child(odd) { fill: var(--terracotta); }
.fragment-svg .mask-facet:nth-child(even) { fill: var(--amber); }
.fragment-svg .mask-facet:nth-child(3n) { fill: var(--deep-terracotta); }

/* ============================================
   CRACK LINES
   ============================================ */
.crack-line {
    display: block;
    width: 100%;
    height: 20px;
    position: relative;
    z-index: 2;
    overflow: visible;
}

.crack-path {
    opacity: 0.3;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.2s ease-in-out;
}

.crack-path.drawn {
    stroke-dashoffset: 0;
}

.crack-path--branch {
    opacity: 0.2;
}

/* ============================================
   CARD-FLIP ZONE
   ============================================ */
.card-zone {
    position: relative;
    padding: 8rem 3vw 8rem 6vw;
    overflow: hidden;
    transition: background-color 0.8s ease;
}

.card-zone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(var(--charcoal) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

.card-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 680px;
    position: relative;
    z-index: 2;
}

/* --- Individual Card --- */
.flip-card {
    width: 320px;
    height: 440px;
    perspective: 1200px;
    cursor: pointer;
}

.flip-card--offset-0  { margin-left: 0; }
.flip-card--offset-20 { margin-left: 20px; }
.flip-card--offset-n10 { margin-left: 0; margin-right: 10px; }
.flip-card--offset-30 { margin-left: 30px; }
.flip-card--offset-10 { margin-left: 10px; }

.flip-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.flip-card:hover .flip-card__inner,
.flip-card.flipped .flip-card__inner {
    transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0;
    overflow: hidden;
}

/* Front face */
.flip-card__front {
    background-color: var(--deep-terracotta);
    box-shadow: 8px 8px 0 var(--charcoal);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.5rem;
}

.flip-card__front::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(var(--charcoal) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.shard-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flip-card__label {
    position: relative;
    z-index: 2;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.8rem;
    color: var(--warm-chalk);
    text-shadow: 2px 2px 0 rgba(26, 20, 18, 0.5);
}

.corner-shard {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    z-index: 2;
}

/* Back face */
.flip-card__back {
    background-color: var(--warm-chalk);
    transform: rotateY(180deg);
    box-shadow: -8px 8px 0 var(--charcoal);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.flip-card__keyword {
    font-family: 'Bebas Neue', cursive;
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal);
    margin-bottom: 1.5rem;
    line-height: 1;
}

.flip-card__reveal-text {
    font-family: 'Barlow', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--charcoal);
}

/* ============================================
   FOOTER: THE UNDERPASS
   ============================================ */
.underpass {
    position: relative;
    background-color: var(--charcoal);
    padding: 10rem 3vw 6rem 6vw;
    overflow: hidden;
    min-height: 50vh;
}

.underpass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(var(--warm-chalk) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

.underpass-cracks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
}

/* Final crystal motif */
.final-motif {
    position: relative;
    z-index: 2;
    margin-bottom: 4rem;
}

.final-crystal {
    width: 80px;
    height: 107px;
    animation: crystalPulse 3s ease-in-out infinite;
}

@keyframes crystalPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.6));
    }
}

.underpass-content {
    position: relative;
    z-index: 2;
}

.underpass-text {
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--crystal-frost);
    margin-bottom: 1rem;
    line-height: 1.65;
}

.underpass-domain {
    font-family: 'Bebas Neue', cursive;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--mask-gold);
    text-transform: uppercase;
}

/* ============================================
   SCROLL ATMOSPHERE (background transitions)
   ============================================ */
body.atmosphere-mid {
    --current-bg: var(--crystal-frost);
}

body.atmosphere-dark {
    --current-bg: var(--charcoal);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .ghost-word {
        font-size: 8rem;
    }

    .ghost-word--4 {
        font-size: 10rem;
    }

    .ghost-word--5 {
        font-size: 6rem;
    }

    .sentinel-mask {
        width: 70vw;
        left: 4vw;
    }

    .hero {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .hero-title__main {
        font-size: clamp(3rem, 15vw, 6rem);
    }

    .tagline-band__text {
        font-size: clamp(1.8rem, 8vw, 3.5rem);
    }

    .tagline-band__inner,
    .bridge-section,
    .card-zone {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .flip-card {
        width: 280px;
        height: 390px;
    }

    .flip-card--offset-0,
    .flip-card--offset-20,
    .flip-card--offset-n10,
    .flip-card--offset-30,
    .flip-card--offset-10 {
        margin-left: 0;
    }

    .bridge-text {
        font-size: 1.1rem;
    }

    .underpass {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .fragment-mask--right {
        width: 120px;
        height: 240px;
    }
}

@media (max-width: 480px) {
    .flip-card {
        width: 100%;
        max-width: 320px;
        height: 400px;
    }

    .hero-title__main {
        font-size: 3rem;
    }

    .hero-title__sub {
        font-size: 1rem;
    }

    .underpass-domain {
        font-size: 2rem;
    }
}