/* ============================================
   SkyCetus 2.1 — 入境港口
   4步入境仪式：仪式 → 原型 → 初生地 → 档案
   ============================================ */

.port-hero{padding:9rem 2rem 4rem;text-align:center;position:relative;background:linear-gradient(180deg,var(--space-deep),var(--space))}
.port-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(212,175,55,.06),transparent 60%)}
.port-hero-content{position:relative;z-index:1}
.port-icon{font-size:3rem;display:block;margin-bottom:1.5rem;animation:sunGlow 4s ease-in-out infinite alternate}
@keyframes sunGlow{0%{text-shadow:0 0 20px rgba(212,175,55,.3)}100%{text-shadow:0 0 50px rgba(212,175,55,.6)}}
.port-subtitle{font-family:var(--font-serif);font-size:1rem;color:var(--white-50);margin-top:.5rem}

/* ── Ceremony Container ── */
.ceremony-section{padding:2rem var(--container-padding) var(--section-padding);background:var(--bg-primary)}
.ceremony-container{max-width:620px;margin:0 auto}

/* ── Progress Bar ── */
.ceremony-progress{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:3rem}
.progress-step{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:60px}
.step-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--white-15);background:transparent;transition:all .4s ease}
.progress-step.active .step-dot{border-color:var(--gold);background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.4)}
.progress-step.done .step-dot{border-color:var(--gold);background:var(--gold)}
.step-label{font-size:.72rem;color:var(--white-20);transition:color .3s}
.progress-step.active .step-label{color:var(--gold)}
.progress-step.done .step-label{color:var(--white-40)}
.progress-line{flex:1;height:1px;background:var(--white-10);max-width:80px}

/* ── Steps ── */
.ceremony-step{display:none;animation:stepIn .5s var(--ease-out)}
.ceremony-step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.step-header{text-align:center;margin-bottom:2.5rem}
.step-number{font-family:var(--font-serif);font-size:2.5rem;font-weight:200;color:var(--gold);display:block;margin-bottom:.5rem}
.step-title{font-family:var(--font-serif);font-size:1.5rem;font-weight:300;color:var(--white);margin-bottom:.5rem}
.step-desc{font-size:.9rem;color:var(--white-40)}

.step-actions{text-align:center;margin-top:2rem}

/* ── Questions ── */
.question-card{padding:1.75rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:1.25rem;animation:stepIn .5s ease}
.q-number{font-family:var(--font-serif);font-size:1.8rem;font-weight:200;color:var(--gold);display:block;margin-bottom:.75rem}
.q-text{font-family:var(--font-serif);font-size:1.05rem;color:var(--white-70);margin-bottom:1rem;line-height:1.7}
.question-card .form-input{background:var(--white-05)}

/* ── Archetype Reveal ── */
.archetype-reveal{text-align:center;padding:3rem 2rem;background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-lg);animation:revealIn .8s ease}
@keyframes revealIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.archetype-icon{font-size:3.5rem;display:block;margin-bottom:1rem;animation:archetypePulse 3s ease-in-out infinite}
@keyframes archetypePulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.1);filter:brightness(1.3)}}
.archetype-name{font-family:var(--font-serif);font-size:1.8rem;font-weight:300;color:var(--gold);margin-bottom:.75rem}
.archetype-desc{font-size:.95rem;color:var(--white-60);line-height:1.8;max-width:450px;margin:0 auto 1.5rem}
.archetype-traits{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}
.archetype-trait{padding:.3rem .8rem;font-size:.78rem;border-radius:var(--radius-full);border:1px solid var(--border-glow);color:var(--gold);background:var(--gold-glow)}

/* ── Birthplace ── */
.birthplace-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.birthplace-card{padding:2rem 1.5rem;background:var(--bg-card);border:2px solid var(--border-subtle);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--t-base)}
.birthplace-card:hover{border-color:var(--white-30)}
.birthplace-card.selected{border-color:var(--gold);background:rgba(212,175,55,.04);box-shadow:var(--shadow-glow)}
.bp-icon{font-size:2.5rem;display:block;margin-bottom:.75rem}
.birthplace-card h4{font-family:var(--font-serif);font-weight:400;font-size:1.1rem;color:var(--white);margin-bottom:.5rem}
.birthplace-card p{font-size:.85rem;color:var(--white-40);line-height:1.6;margin-bottom:.75rem}
.bp-tag{font-size:.72rem}

/* ── Entry Success ── */
.entry-success{text-align:center;animation:revealIn .8s ease}
.success-glow{width:120px;height:120px;margin:0 auto 1rem;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.15),transparent 70%);animation:archetypePulse 3s ease-in-out infinite}
.success-icon{font-size:3rem;color:var(--gold);display:block;margin-top:-4.5rem;margin-bottom:1.5rem;position:relative}
.success-title{font-family:var(--font-serif);font-size:1.6rem;font-weight:300;color:var(--white);margin-bottom:.3rem}
.success-citizen-id{font-size:.88rem;color:var(--gold);letter-spacing:.1em;margin-bottom:2rem}

.success-card{text-align:left;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-md);margin-bottom:1.5rem}
.sc-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--white-05)}
.sc-row:last-child{border-bottom:none}
.sc-label{font-size:.82rem;color:var(--white-30)}
.sc-value{font-size:.88rem;color:var(--white-70)}

.success-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}

.success-blessing{font-family:var(--font-serif);font-size:.88rem;color:var(--white-20);font-style:italic;margin-bottom:2rem}

.success-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ── Responsive ── */
@media(max-width:768px){
    .birthplace-grid{grid-template-columns:1fr}
    .ceremony-progress{gap:0}
    .progress-line{max-width:40px}
    .success-actions{flex-direction:column;align-items:center}
}