/* ============================================================================
   hub-welcome.css  First sign-in welcome (hub-welcome.js)
   The hero is a live scene: points of light gather into a ring around the
   EFF mark, the ring charges while the badge counts to 360, then it bursts
   and the light settles into slow orbits that react to the cursor.
   Timeline (seconds): gather 0-1.25 | ring draws 1.05-1.85 | burst 1.9 |
   headline 1.7+ | features 2.2+ | actions 2.8.
   ============================================================================ */
#hubWelcome {
    position: fixed; inset: 0; z-index: 10400; display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: radial-gradient(1200px 800px at 50% 45%, rgba(15, 32, 26, 0.55), rgba(8, 18, 14, 0.78));
    animation: hwFade 0.45s ease both;
    font-family: 'Futura PT', 'Jost', 'Century Gothic', sans-serif;
}
.hw-card {
    width: min(1040px, 94vw); max-height: 92vh; display: grid; grid-template-columns: 390px 1fr;
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(193, 154, 107, 0.18);
    transform-origin: 50% 40%;
    animation: hwCardIn 0.95s cubic-bezier(.16, 1, .3, 1) both;
}

/* ── Left: the scene ─────────────────────────────────────────────────────── */
.hw-hero {
    position: relative; overflow: hidden; color: #fff; display: flex;
    background:
        radial-gradient(520px 420px at 26% 30%, rgba(47, 133, 66, 0.55), transparent 70%),
        radial-gradient(460px 380px at 95% 110%, rgba(193, 154, 107, 0.24), transparent 70%),
        #183a30;
    perspective: 900px;
}
/* A slow rotating sheet of light behind everything */
.hw-aurora {
    position: absolute; width: 190%; height: 190%; left: -45%; top: -45%; pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0 18%, rgba(193, 154, 107, 0.16) 28%, transparent 40%,
        rgba(47, 133, 66, 0.30) 58%, transparent 72%, rgba(244, 240, 233, 0.07) 86%, transparent 94%);
    animation: hwSpin 28s linear infinite, hwFade 1.4s ease both;
}
/* Soft light that follows the cursor */
.hw-spot {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 30%), rgba(244, 240, 233, 0.11), transparent 62%);
}
.hw-hero:hover .hw-spot { opacity: 1; }

.hw-stage {
    position: relative; flex: 1; min-height: 100%;
    padding: 42px 36px; display: flex; flex-direction: column; justify-content: center; gap: 24px;
    transform-style: preserve-3d; will-change: transform;
}
.hw-canvas { position: absolute; inset: 0; pointer-events: none; }
.hw-copy { position: relative; transform: translateZ(30px); display: flex; flex-direction: column; gap: 14px; }

/* ── The ring ────────────────────────────────────────────────────────────── */
.hw-ring { position: relative; width: 150px; height: 150px; flex: none; }
.hw-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.hw-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 6; }
/* 36 tick marks, one per 10 degrees, turning slowly the other way */
.hw-ring-dial {
    fill: none; stroke: rgba(244, 240, 233, 0.38); stroke-width: 3.2;
    stroke-dasharray: 1.3 11.62; transform-origin: 75px 75px; opacity: 0;
    animation: hwDialIn 0.9s ease 0.7s forwards, hwSpinRev 46s linear 1.6s infinite;
}
.hw-ring-arc {
    fill: none; stroke: #C19A6B; stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 427; stroke-dashoffset: 427;
    filter: drop-shadow(0 0 6px rgba(193, 154, 107, 0.65));
    animation: hwDraw 0.8s cubic-bezier(.65, 0, .35, 1) 1.05s forwards;
}
.hw-ring-tip { transform-origin: 75px 75px; opacity: 0;
    animation: hwOrbit 0.8s cubic-bezier(.65, 0, .35, 1) 1.05s forwards, hwTipOut 0.3s ease 1.85s forwards; }
.hw-ring-tip-dot { fill: #fff; }
.hw-ring-tip-glow { fill: rgba(244, 227, 200, 0.55); }
/* A bright comet that keeps circling once the ring is lit */
.hw-ring-orbit { transform-origin: 75px 75px; opacity: 0;
    animation: hwOrbitIn 0.6s ease 1.95s forwards, hwSpin 4.4s linear 1.95s infinite; }
.hw-ring-comet {
    fill: none; stroke: #F4F0E9; stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 38 389; filter: drop-shadow(0 0 5px rgba(244, 240, 233, 0.9));
}

.hw-ripple {
    position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(193, 154, 107, 0.5);
    opacity: 0; pointer-events: none;
    animation: hwRipple 3.8s cubic-bezier(.2, .6, .35, 1) 3.2s infinite;
}
.hw-ripple-2 { animation-delay: 5.1s; }

/* The EFF mark flips in on its axis, then catches a passing light */
.hw-ring-mark { position: absolute; inset: 22px; border-radius: 50%; perspective: 600px; }
.hw-ring-mark::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(244, 227, 200, 0.7); opacity: 0;
    animation: hwHalo 1.2s ease-out 1.9s forwards;
}
.hw-mark-face {
    position: absolute; inset: 0; border-radius: 50%; background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 -6px 14px rgba(30, 99, 50, 0.10);
    animation: hwFlip 1.05s cubic-bezier(.2, 1.3, .35, 1) 1.2s both;
}
.hw-mark-face img { width: 64%; height: auto; position: relative; }
.hw-shine {
    position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: hwShine 5.2s ease 2.15s infinite;
}

.hw-ring-deg {
    position: absolute; right: -8px; bottom: 2px; background: #C19A6B; color: #183a30;
    font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    min-width: 44px; text-align: center; font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateZ(40px);
    animation: hwPop 0.5s cubic-bezier(.2, 1.5, .4, 1) 0.95s both;
}
.hw-ring-deg.is-done { animation: hwDegDone 0.7s cubic-bezier(.2, 1.6, .4, 1); }

/* ── Headline: word by word, then a sheen passes over it ─────────────────── */
.hw-greet { margin: 0; font-size: 2.3rem; font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; perspective: 500px; }
.hw-w {
    display: inline-block; padding-bottom: 0.08em;
    background: linear-gradient(100deg, #fff 0 42%, #F1D9B5 50%, #fff 58% 100%);
    background-size: 260% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transform-origin: 50% 100%;
    animation:
        hwWordIn 0.85s cubic-bezier(.16, 1, .3, 1) calc(1.7s + var(--w, 0) * 90ms) both,
        hwSheen 1.3s ease calc(2.75s + var(--w, 0) * 110ms) forwards;
}
.hw-lede { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 32ch;
    animation: hwUp 0.7s cubic-bezier(.16, 1, .3, 1) 2.2s both; }

/* ── Right: what you can do ──────────────────────────────────────────────── */
.hw-body { padding: 34px 36px 28px; display: flex; flex-direction: column; min-height: 0; }
.hw-body h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; color: #1E6332; animation: hwUp 0.6s cubic-bezier(.16, 1, .3, 1) 2.0s both; }
.hw-body > p { margin: 0 0 16px; font-size: 14px; color: #475453; animation: hwUp 0.6s cubic-bezier(.16, 1, .3, 1) 2.08s both; }
.hw-list {
    list-style: none; margin: 0; padding: 4px 6px 4px 4px; overflow-y: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
}
.hw-list li {
    display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
    padding: 8px; border-radius: 12px; transform-origin: 50% 0;
    transition: background 0.25s ease;
    animation: hwItemIn 0.75s cubic-bezier(.16, 1, .3, 1) calc(2.2s + var(--i, 0) * 60ms) both;
}
.hw-list li:hover { background: #F8F5EF; }
.hw-ic {
    position: relative; width: 36px; height: 36px; border-radius: 11px; background: #F4F0E9; color: #1E6332;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    transition: transform 0.35s cubic-bezier(.2, 1.4, .4, 1), background 0.25s ease, color 0.25s ease;
    animation: hwIconPop 0.65s cubic-bezier(.2, 1.6, .4, 1) calc(2.35s + var(--i, 0) * 60ms) backwards;
}
.hw-ic::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #C19A6B;
    opacity: 0; pointer-events: none;
    animation: hwIconRing 0.9s ease-out calc(2.5s + var(--i, 0) * 60ms);
}
.hw-list li:hover .hw-ic { transform: translateY(-2px) rotate(-7deg) scale(1.08); background: #1E6332; color: #fff; }
.hw-ic img { width: 36px; height: 36px; border-radius: 50%; }
.hw-list b { display: block; font-size: 14px; font-weight: 600; color: #231F20; }
.hw-list li > div > span { display: block; font-size: 13px; line-height: 1.45; color: #5b6463; }

.hw-actions {
    margin-top: 20px; padding-top: 18px; border-top: 1px solid #efeae2;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    animation: hwUp 0.6s cubic-bezier(.16, 1, .3, 1) 2.8s both;
}
.hw-start {
    position: relative; overflow: hidden; border: 0; background: #1E6332; color: #fff; border-radius: 11px;
    padding: 13px 28px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 10px 24px rgba(30, 99, 50, 0.35);
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s ease, background 0.2s ease;
}
.hw-start:hover { background: #214A3E; box-shadow: 0 14px 30px rgba(30, 99, 50, 0.45); }
.hw-start::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-160%) skewX(-20deg);
    animation: hwBtnShine 4.4s ease 3.2s infinite;
}
.hw-skip { border: 0; background: transparent; color: #475453; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hw-skip:hover { color: #1E6332; }
.hw-note { font-size: 12px; color: #6b7280; margin-left: auto; max-width: 34ch; }
.hw-start:focus-visible, .hw-skip:focus-visible { outline: 3px solid #C19A6B; outline-offset: 2px; }

/* ── Leaving: the card warps away while the light pulls into the mark ────── */
#hubWelcome.hw-leaving { animation: hwFadeOut 0.5s ease 0.05s forwards; }
#hubWelcome.hw-leaving .hw-card { animation: hwWarp 0.5s cubic-bezier(.6, 0, .4, 1) forwards; }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes hwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hwFadeOut { to { opacity: 0; } }
@keyframes hwCardIn {
    from { opacity: 0; transform: perspective(1400px) rotateX(16deg) translateY(44px) scale(0.9); }
    to { opacity: 1; transform: none; }
}
@keyframes hwWarp { to { opacity: 0; transform: perspective(1400px) translateZ(60px) scale(1.04); } }
@keyframes hwDraw { to { stroke-dashoffset: 0; } }
@keyframes hwOrbit { 0% { opacity: 1; transform: rotate(0deg); } 100% { opacity: 1; transform: rotate(360deg); } }
@keyframes hwTipOut { to { opacity: 0; } }
@keyframes hwOrbitIn { to { opacity: 1; } }
@keyframes hwSpin { to { transform: rotate(360deg); } }
@keyframes hwSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes hwDialIn { to { opacity: 1; } }
@keyframes hwPop { from { opacity: 0; transform: translateZ(40px) scale(0.5); } to { opacity: 1; transform: translateZ(40px) scale(1); } }
@keyframes hwDegDone {
    0% { transform: translateZ(40px) scale(1); box-shadow: 0 0 0 0 rgba(193, 154, 107, 0.7); }
    40% { transform: translateZ(40px) scale(1.28); }
    100% { transform: translateZ(40px) scale(1); box-shadow: 0 0 0 14px rgba(193, 154, 107, 0); }
}
@keyframes hwFlip {
    0% { opacity: 0; transform: rotateY(-110deg) scale(0.45); }
    55% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes hwShine {
    0% { transform: translateX(-160%) skewX(-18deg); }
    22%, 100% { transform: translateX(360%) skewX(-18deg); }
}
@keyframes hwHalo {
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 227, 200, 0.7); }
    100% { opacity: 0; box-shadow: 0 0 0 26px rgba(244, 227, 200, 0); }
}
@keyframes hwRipple { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hwWordIn {
    from { opacity: 0; transform: translateY(0.6em) rotateX(-75deg); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes hwSheen { to { background-position: 0 0; } }
@keyframes hwUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hwItemIn {
    from { opacity: 0; transform: perspective(700px) rotateX(-65deg) translateY(18px); }
    to { opacity: 1; transform: none; }
}
@keyframes hwIconPop { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes hwIconRing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hwBtnShine {
    0% { transform: translateX(-160%) skewX(-20deg); }
    25%, 100% { transform: translateX(330%) skewX(-20deg); }
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .hw-card { grid-template-columns: 1fr; overflow-y: auto; }
    .hw-stage { padding: 26px 22px; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }
    .hw-ring { width: 104px; height: 104px; }
    .hw-ring-mark { inset: 15px; }
    .hw-copy { flex: 1 1 200px; }
    .hw-greet { font-size: 1.6rem; }
    .hw-body { padding: 22px; }
    .hw-list { grid-template-columns: 1fr; overflow: visible; }
    .hw-note { margin-left: 0; flex-basis: 100%; }
}

/* ── People who turned motion off see everything at once ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    #hubWelcome, .hw-card, .hw-aurora, .hw-mark-face, .hw-ring-deg, .hw-w, .hw-lede,
    .hw-body h3, .hw-body > p, .hw-list li, .hw-ic, .hw-actions,
    #hubWelcome.hw-leaving, #hubWelcome.hw-leaving .hw-card { animation: none; }
    .hw-w { color: #fff; background: none; }
    .hw-ring-arc { animation: none; stroke-dashoffset: 0; }
    .hw-ring-dial { animation: none; opacity: 1; }
    .hw-ring-tip, .hw-ring-mark::after, .hw-ripple, .hw-ring-orbit, .hw-shine,
    .hw-ic::after, .hw-start::after { animation: none; opacity: 0; }
    .hw-canvas, .hw-spot { display: none; }
}