/* =============================================================
   persopass.io v2 — Graffiti / parallax / nostalgic-retro
   Palette:
     #0A0A0A street black, #FAFAFA pure white, #FFD030 graffiti yellow,
     #E83838 graffiti red, #B0B8C8 star silver, #404048 concrete,
     #3888E8 spray blue
   Font: Inter (400/700/800/900)
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: #0A0A0A;
    color: #FAFAFA;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    line-height: 1.6;
}

/* Spray-paint texture overlay across the body */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 208, 48, 0.05) 0, rgba(255, 208, 48, 0) 40%),
        radial-gradient(circle at 78% 26%, rgba(232, 56, 56, 0.05) 0, rgba(232, 56, 56, 0) 35%),
        radial-gradient(circle at 32% 62%, rgba(56, 136, 232, 0.04) 0, rgba(56, 136, 232, 0) 38%),
        radial-gradient(circle at 86% 78%, rgba(176, 184, 200, 0.03) 0, rgba(176, 184, 200, 0) 42%),
        radial-gradient(circle at 50% 50%, rgba(255, 208, 48, 0.018) 0, rgba(255, 208, 48, 0) 60%);
    opacity: 1;
    mix-blend-mode: screen;
}

/* Subtle grain via tiny dot pattern */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image:
        radial-gradient(rgba(176, 184, 200, 0.06) 1px, transparent 1.2px);
    background-size: 6px 6px;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

/* =============== Spray flash burst on load =============== */
.spray-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 208, 48, 0.18) 0, rgba(255, 208, 48, 0) 30%),
                radial-gradient(circle at 72% 56%, rgba(232, 56, 56, 0.14) 0, rgba(232, 56, 56, 0) 28%);
    z-index: 50;
    pointer-events: none;
    opacity: 0;
}
.spray-flash.fire {
    animation: sprayBurst 1100ms ease-out forwards;
}
@keyframes sprayBurst {
    0%   { opacity: 0; transform: scale(0.6); }
    20%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* =============== Section / parallax containers =============== */
.section {
    position: relative;
    width: 100%;
    padding: 120px 24px;
    overflow: hidden;
    z-index: 3;
}

.parallax-container {
    isolation: isolate;
}

#wall {
    min-height: 100vh;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plane {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

.plane-bg { z-index: 1; }
.plane-mid { z-index: 2; }
.plane-fg {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    max-width: 960px;
    margin: 0 auto;
}

#wall .plane-fg {
    width: 100%;
    max-width: 960px;
}

/* =============== Star-celestial decoration =============== */
.star, .compass-rose {
    position: absolute;
    opacity: 0.75;
    transition: filter 600ms ease, opacity 600ms ease, transform 700ms ease;
    will-change: transform;
}
.star.lit, .compass-rose.lit {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(176, 184, 200, 0.55));
    transform: scale(1.18);
}

/* Hero stars positioning */
#wall .s-a { top: 14%; left: 9%;  }
#wall .s-b { top: 22%; right: 12%; }
#wall .s-c { top: 70%; left: 18%; }
#wall .s-d { top: 80%; right: 18%; }
#wall .s-e { top: 12%; right: 38%; }
#wall .s-f { top: 60%; right: 6%; }
#wall .c-1 { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.18; }

#philosophy .s-a { top: 12%; left: 6%; }
#philosophy .s-b { top: 78%; right: 8%; }
#philosophy .s-c { top: 26%; right: 22%; }

#principles .s-d { top: 8%; right: 8%; }
#principles .s-e { top: 84%; left: 10%; }
#principles .c-2 { top: 8%; left: 12%; opacity: 0.22; }

#flow .s-a { top: 12%; left: 8%; }
#flow .s-b { top: 76%; right: 10%; }

#craft .s-c { top: 10%; right: 12%; }
#craft .s-d { top: 80%; left: 12%; }

#stamp .s-a { top: 14%; left: 14%; }
#stamp .s-b { top: 72%; right: 16%; }

/* =============== Auth diagram graphic placement =============== */
.auth-graphic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    height: auto;
    opacity: 0.4;
    pointer-events: none;
}

/* Diagram stroke draw-in animation */
.ink {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}
.ink-fast {
    opacity: 0;
}
.ink-slow {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

.draw .ink {
    animation: drawStroke 1200ms ease-out forwards;
}
.draw .ink-fast {
    animation: fadeIn 600ms ease-out 600ms forwards;
}
.draw .ink-slow {
    animation: drawStroke 1800ms ease-out 400ms forwards;
}

@keyframes drawStroke {
    to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Flow diagram rendered crisp inside its panel */
.flow-canvas {
    position: relative;
    margin-top: 56px;
    padding: 32px 24px;
    border: 2px solid #404048;
    background: linear-gradient(180deg, rgba(64, 64, 72, 0.18), rgba(10, 10, 10, 0));
}
.flow-diagram {
    position: relative;
    transform: none;
    inset: auto;
    top: auto;
    left: auto;
    width: 100%;
    opacity: 1;
}

/* =============== Wall (hero) typography =============== */
.wall-frame {
    text-align: left;
    padding: 24px;
    border-left: 4px solid #FFD030;
    transform: translateX(-12px);
    opacity: 0;
    animation: wallEnter 900ms ease-out 200ms forwards;
}
@keyframes wallEnter {
    to { transform: translateX(0); opacity: 1; }
}

.street-label {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFD030;
    margin-bottom: 18px;
    padding: 4px 10px;
    border: 1px solid #FFD030;
}

.domain-mark {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 6vw, 88px);
    letter-spacing: -0.015em;
    color: #FAFAFA;
    line-height: 1;
    margin-bottom: 18px;
    position: relative;
}
.domain-mark::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background: #E83838;
    margin-top: 16px;
    animation: underlineGrow 900ms ease-out 1100ms forwards;
}
@keyframes underlineGrow {
    to { width: 38%; }
}

.wall-tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.75;
    color: #B0B8C8;
    max-width: 540px;
    margin-bottom: 28px;
}

.wall-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid #404048;
    background: rgba(64, 64, 72, 0.2);
    color: #FAFAFA;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-yellow { background: #FFD030; }
.dot-red    { background: #E83838; }
.dot-blue   { background: #3888E8; }

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: cueEnter 600ms ease-out 1600ms forwards;
}
@keyframes cueEnter {
    to { opacity: 1; }
}
.cue-label {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #B0B8C8;
}
.cue-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #B0B8C8, transparent);
    animation: cuePulse 1800ms ease-in-out infinite;
}
@keyframes cuePulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
    50%      { opacity: 1;   transform: scaleY(1.2); }
}

/* =============== Reveal animations =============== */
.reveal {
    opacity: 0;
    transition: opacity 600ms ease, transform 600ms ease;
}
.slide-left  { transform: translateX(-60px); }
.slide-right { transform: translateX(60px); }
.reveal.in {
    opacity: 1;
    transform: translateX(0);
}

/* =============== Section titles & prose =============== */
.section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 56px);
    letter-spacing: -0.012em;
    line-height: 1.1;
    color: #FAFAFA;
    margin: 14px 0 28px;
    max-width: 880px;
}

.prose {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.75;
    color: #B0B8C8;
    margin-bottom: 18px;
    max-width: 720px;
}

.section:hover {
    /* parent hover rule wired by JS via .section-hover, kept light here */
}

/* When a section is hovered, accent border-left appears via JS toggling */
.section.section-hover .wall-frame,
.section.section-hover .reveal {
    /* small left shift on hover - via JS .near class */
}
.reveal.near {
    transform: translateX(4px) !important;
}

/* =============== Strokes (principles) =============== */
.strokes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.stroke {
    position: relative;
    padding: 32px 28px;
    border: 2px solid #404048;
    background: linear-gradient(180deg, rgba(64, 64, 72, 0.16), rgba(10, 10, 10, 0));
    transition: border-color 350ms ease, transform 350ms ease, background 350ms ease;
}
.stroke::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #FFD030;
    transition: height 400ms ease;
}
.stroke:hover {
    border-color: #FFD030;
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255, 208, 48, 0.06), rgba(10, 10, 10, 0));
}
.stroke:hover::before {
    height: 100%;
}

.stroke-num {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #E83838;
    margin-bottom: 12px;
    display: block;
}
.stroke-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.02em;
    color: #FAFAFA;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.stroke-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: #B0B8C8;
}

/* =============== Craft cards =============== */
.craft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.craft-card {
    padding: 28px 24px;
    border-top: 2px solid #404048;
    background: rgba(64, 64, 72, 0.10);
    transition: border-color 350ms ease, transform 350ms ease, background 350ms ease;
    position: relative;
}
.craft-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 80% 0%, rgba(255, 208, 48, 0.0) 0%, rgba(255, 208, 48, 0) 60%);
    transition: background 400ms ease;
}
.craft-card:hover {
    border-color: #FFD030;
    transform: translateY(-3px);
    background: rgba(64, 64, 72, 0.20);
}
.craft-card:hover::after {
    background: radial-gradient(circle at 80% 0%, rgba(255, 208, 48, 0.08) 0%, rgba(255, 208, 48, 0) 60%);
}

.craft-label {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3888E8;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid #3888E8;
}
.craft-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: #FAFAFA;
}

/* =============== Pass stamp =============== */
.pass-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 56px;
    margin: 64px auto 48px;
    transform: scale(0.8) rotate(-5deg);
    opacity: 0;
}
.pass-stamp.stamped {
    animation: stampDown 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes stampDown {
    0%   { transform: scale(0.8) rotate(-5deg); opacity: 0; }
    60%  { transform: scale(1.05) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.stamp-svg {
    flex-shrink: 0;
    filter: drop-shadow(0 6px 18px rgba(255, 208, 48, 0.18));
}

.stamp-stars polygon {
    transform-origin: center;
    transition: stroke 400ms ease, transform 400ms ease;
}
.pass-stamp:hover .stamp-stars polygon {
    stroke: #FFD030;
}

.stamp-meta {
    text-align: left;
    min-width: 240px;
}
.stamp-line {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #FAFAFA;
    margin-top: 8px;
    line-height: 1.5;
}
.stamp-line span {
    color: #FFD030;
    font-weight: 900;
}

/* =============== Footer row =============== */
.footer-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 36px;
    border-top: 2px solid #404048;
    margin-top: 24px;
}
.footer-mark {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #FFD030;
    letter-spacing: -0.005em;
}
.footer-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #FFD030, #E83838, #3888E8);
    min-width: 80px;
}
.footer-tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #B0B8C8;
    line-height: 1.6;
    max-width: 420px;
}

/* =============== Section hover accent =============== */
.section.section-hover {
    box-shadow: inset 4px 0 0 #FFD030;
}
.section.section-hover::before {
    /* gentle spray increase on hover */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255, 208, 48, 0.04) 0%, rgba(255, 208, 48, 0) 60%);
    z-index: 0;
}

/* =============== Abstract pattern =============== */
.abstract-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.45;
}

/* =============== Responsive =============== */
@media (max-width: 720px) {
    .section { padding: 88px 18px; }
    #wall    { padding: 0 18px; }
    .wall-frame { padding: 18px; }
    .wall-meta  { gap: 8px; }
    .meta-chip  { font-size: 10px; padding: 4px 8px; }
    .pass-stamp { gap: 24px; }
    .stamp-svg  { width: 240px; height: 240px; }
    .strokes    { gap: 16px; }
    .stroke     { padding: 24px 20px; }
    .craft-grid { gap: 14px; }
    .footer-row { gap: 14px; padding-top: 24px; }
    .auth-graphic { opacity: 0.28; }
    .scroll-cue   { bottom: 16px; }
}

@media (max-width: 480px) {
    #wall .c-1 { width: 80px; height: 80px; }
    #wall .s-e, #wall .s-f { display: none; }
    .domain-mark::after { animation: underlineGrowSm 900ms ease-out 1100ms forwards; }
    @keyframes underlineGrowSm {
        to { width: 64%; }
    }
}