/* ===================================================================
   Wordly — homepage redesign v2 (2026-10-24)
   Styles for public/js/home-v2.js. EVERY rule is scoped under
   html[data-home="v2"], so removing that one attribute from index.html
   restores the previous homepage exactly. See the header of home-v2.js
   for the full revert instructions; the pre-change files are in
   Reference/backups/2026-10-24-home-redesign/.

   Built on the dark shell's own tokens (site-public.css): --glass,
   --hair, --grad-accent, --grad-cta, --accent-cyan, --text-*. Text
   colours are the shell's measured ones; nothing here paints body copy
   in a colour that was not already contrast-checked on this ground.
   =================================================================== */

/* ═══ 1 · IN YOUR ACCOUNT — the bento ══════════════════════════════ */

html[data-home="v2"] .hv-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    perspective: 1200px;
}
html[data-home="v2"] .hv-card {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    min-height: 330px; padding: 0; overflow: hidden;
    border-radius: 24px; text-decoration: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    border: 1px solid var(--hair-2);
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    animation: hv-rise .7s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--d) * 80ms);
}
html[data-home="v2"] .hv-card-wide { grid-column: span 2; }
html[data-home="v2"] .hv-card:hover {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 30px 70px rgba(124, 58, 237, 0.28), 0 0 0 1px rgba(34, 211, 238, 0.12) inset;
}
@keyframes hv-rise { from { opacity: 0; transform: translateY(26px) scale(.98); } }

/* The pointer glow — a soft light that follows the cursor. */
html[data-home="v2"] .hv-glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(167, 139, 250, 0.22), transparent 60%);
    opacity: 0; transition: opacity .3s ease;
}
html[data-home="v2"] .hv-card:hover .hv-glow,
html[data-home="v2"] .hv-why-card:hover .hv-glow { opacity: 1; }

html[data-home="v2"] .hv-card-body { position: relative; padding: 0 1.5rem 1.5rem; margin-top: auto; transform: translateZ(30px); }
html[data-home="v2"] .hv-tag {
    display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px;
    background: rgba(167, 139, 250, 0.14); color: #c4b5fd;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
html[data-home="v2"] .hv-card h3 { margin: 0.7rem 0 0.4rem; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
html[data-home="v2"] .hv-card p { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
html[data-home="v2"] .hv-more { font-weight: 700; font-size: 0.9rem; color: var(--accent-cyan); }
html[data-home="v2"] .hv-more b { display: inline-block; transition: transform .25s ease; }
html[data-home="v2"] .hv-card:hover .hv-more b { transform: translateX(5px); }

/* The six scenes live in /css/scenes.css (shared with the service pages). */

/* ═══ 2 · WHY WORDLY — the spotlight board ═════════════════════════ */

html[data-home="v2"] .hv-why-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    border-radius: 24px; overflow: hidden;
    background: var(--hair-2);                       /* the 1px gaps draw the grid lines */
    border: 1px solid var(--hair-2);
}
html[data-home="v2"] .hv-why-card {
    --mx: 50%; --my: 50%;
    position: relative; isolation: isolate; padding: 1.8rem 1.5rem;
    background: var(--site-bg-2);
    transition: background .3s ease;
}
html[data-home="v2"] .hv-why-card:hover { background: var(--site-bg-3); }
html[data-home="v2"] .hv-why-card h3 { margin: 1rem 0 0.45rem; font-size: 1.05rem; color: var(--ink); }
html[data-home="v2"] .hv-why-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-2); }
html[data-home="v2"] .hv-why-icon {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: var(--grad-accent); background-size: 200% 200%; color: #160d2e;
    box-shadow: 0 10px 26px rgba(124, 58, 237, 0.35);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
html[data-home="v2"] .hv-why-icon .icon { width: 22px; height: 22px; }
html[data-home="v2"] .hv-why-card:hover .hv-why-icon { transform: translateY(-4px) rotate(-8deg) scale(1.08); }

/* ═══ 3 · GETTING STARTED — the lit path ═══════════════════════════ */

html[data-home="v2"] .hv-path { position: relative; max-width: 860px; margin: 0 auto; }
html[data-home="v2"] .hv-rail { position: absolute; left: 31px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: var(--hair-2); }
html[data-home="v2"] .hv-rail-fill {
    --p: 0;
    position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p) * 100%);
    border-radius: 3px; background: linear-gradient(180deg, #a78bfa, #e879f9, #22d3ee);
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.7);
    transition: height .9s cubic-bezier(.2, .8, .2, 1);
}
html[data-home="v2"] .hv-comet {
    position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 14px 4px rgba(34, 211, 238, 0.85);
    animation: hv-comet 4.5s linear infinite;
}
@keyframes hv-comet { from { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { top: 100%; opacity: 0; } }
html[data-home="v2"] .hv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
html[data-home="v2"] .hv-step { display: grid; grid-template-columns: 64px 1fr; gap: 1.3rem; align-items: center; }
html[data-home="v2"] .hv-node {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 20px;
    background: var(--site-bg-2); border: 1px solid var(--hair-2); color: var(--text-3);
    transition: all .5s cubic-bezier(.2, .8, .2, 1);
}
html[data-home="v2"] .hv-node .icon { width: 24px; height: 24px; }
html[data-home="v2"] .hv-node b {
    position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.72rem; font-weight: 900;
    background: var(--site-bg-3); color: var(--text-2); border: 1px solid var(--hair-2);
}
html[data-home="v2"] .hv-step-card {
    padding: 1.2rem 1.4rem; border-radius: 20px;
    background: var(--glass); border: 1px solid var(--hair);
    opacity: 0.55; transform: translateX(10px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), border-color .6s ease, background .6s ease;
}
html[data-home="v2"] .hv-step-n { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
html[data-home="v2"] .hv-step-card h3 { margin: 0.25rem 0 0.35rem; font-size: 1.1rem; color: var(--ink); }
html[data-home="v2"] .hv-step-card p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--text-2); }

html[data-home="v2"] .hv-step.is-lit .hv-node {
    background: var(--grad-cta); border-color: transparent; color: #fff;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.18), 0 14px 34px rgba(124, 58, 237, 0.45);
    transform: scale(1.04);
}
html[data-home="v2"] .hv-step.is-lit .hv-node b { background: #22d3ee; color: #062e36; border-color: transparent; }
html[data-home="v2"] .hv-step.is-lit .hv-step-card { opacity: 1; transform: none; border-color: rgba(167, 139, 250, 0.35); background: var(--glass-2); }
html[data-home="v2"] .hv-step.is-lit .hv-step-n { color: #c4b5fd; }

/* ═══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    html[data-home="v2"] .hv-bento { grid-template-columns: repeat(2, 1fr); }
    html[data-home="v2"] .hv-card-wide { grid-column: span 1; }
    html[data-home="v2"] .hv-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    html[data-home="v2"] .hv-bento,
    html[data-home="v2"] .hv-why-grid { grid-template-columns: 1fr; }
    html[data-home="v2"] .hv-card { min-height: 0; }
    html[data-home="v2"] .hv-step { grid-template-columns: 52px 1fr; gap: 0.9rem; }
    html[data-home="v2"] .hv-node { width: 52px; height: 52px; border-radius: 16px; }
    html[data-home="v2"] .hv-rail { left: 25px; }
    html[data-home="v2"] .hv-step-card { padding: 1rem 1.1rem; }
}

/* ═══ Reduced motion — everything still, everything finished ══════ */
@media (prefers-reduced-motion: reduce) {
    html[data-home="v2"] .hv-card,
    html[data-home="v2"] .hv-card *,
    html[data-home="v2"] .hv-why-card *,
    html[data-home="v2"] .hv-path * { animation: none !important; transition: none !important; }
    html[data-home="v2"] .hv-card { transform: none; }
    html[data-home="v2"] .hv-comet { display: none; }
    html[data-home="v2"] .hv-step-card { opacity: 1; transform: none; }
}

/* ═══ 4 · THE WRITTEN-SERVICES SHOWCASE — tidied (2026-10-24) ══════
   The owner found it clumsy. The causes were all in its original rules
   (site-public.css, "THE WRITTEN-SERVICES SHOWCASE"), which are left as
   they are — this block overrides them only under data-home="v2", so it
   reverts with the rest of v2:
     • the three point cards were deliberately STAGGERED (margin-left /
       margin-right per card) and each floated on its own timer, so the
       right-hand column read as scattered boxes
     • three button styles in one row: a white pill tab, outline tabs and
       a big purple "Next"
   Now: one panel of three aligned rows, one segmented tab control, two
   matching round arrows, and each service in its own accent — the same
   accents its light page uses. */

/* Each slide's accent, by position (the order SERVICES lists them). */
html[data-home="v2"] .sc-slide                   { --sca: #a78bfa; --scb: #e879f9; }
html[data-home="v2"] .sc-slide:nth-child(5n + 2) { --sca: #2dd4bf; --scb: #22d3ee; }
html[data-home="v2"] .sc-slide:nth-child(5n + 3) { --sca: #fbbf24; --scb: #fb7185; }
html[data-home="v2"] .sc-slide:nth-child(5n + 4) { --sca: #fb923c; --scb: #f472b6; }
html[data-home="v2"] .sc-slide:nth-child(5n + 5) { --sca: #818cf8; --scb: #38bdf8; }

html[data-home="v2"] .sc-stage { padding: 2.75rem 2.75rem 2rem; }
html[data-home="v2"] .sc-slide { gap: 3rem; align-items: center; }

/* The three points: ONE panel, three aligned rows */
html[data-home="v2"] .sc-facts {
    gap: 0;
    padding: 0.5rem;
    border-radius: 22px;
    background: rgba(14, 11, 30, 0.66);
    border: 1px solid var(--hair-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    position: relative; overflow: hidden;
}
html[data-home="v2"] .sc-facts::before {          /* an accent edge down the left */
    content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--sca), var(--scb));
}
html[data-home="v2"] .sc-fact,
html[data-home="v2"] .sc-fact:nth-child(1),
html[data-home="v2"] .sc-fact:nth-child(2),
html[data-home="v2"] .sc-fact:nth-child(3) {
    margin: 0;
    padding: 1.05rem 1.1rem 1.05rem 1.25rem;
    border: 0; border-radius: 16px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background .25s ease;
}
html[data-home="v2"] .sc-fact + .sc-fact { border-top: 1px solid var(--hair); border-radius: 0 0 16px 16px; }
html[data-home="v2"] .sc-fact:hover { background: rgba(255, 255, 255, 0.04); }
/* Rise in once, in turn — no separate float on each card. */
html[data-home="v2"] .sc-slide.is-active .sc-fact { animation: sc-pop .55s var(--ease) both; }
html[data-home="v2"] .sc-slide.is-active .sc-fact:nth-child(2) { animation-delay: .1s; animation-duration: .55s; }
html[data-home="v2"] .sc-slide.is-active .sc-fact:nth-child(3) { animation-delay: .2s; animation-duration: .55s; }
html[data-home="v2"] .sc-fact-icon {
    background: linear-gradient(130deg, var(--sca), var(--scb));
    color: #12091f;
}
html[data-home="v2"] .sc-fact strong { color: var(--ink); }

/* The planet and the kicker take the slide's accent */
html[data-home="v2"] .sc-slide .sc-planet { --sc-a: var(--sca); --sc-b: var(--scb); }
html[data-home="v2"] .sc-kicker {
    background: linear-gradient(120deg, var(--sca), var(--scb));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Navigation: arrows either side of ONE segmented control */
html[data-home="v2"] .sc-nav { padding: 0.25rem 2.75rem 1.6rem; gap: 0.9rem; }
html[data-home="v2"] .sc-tabs {
    flex: 0 1 auto; margin-inline: auto;
    gap: 0.25rem; padding: 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hair-2);
}
html[data-home="v2"] .sc-tab {
    min-height: 38px; padding: 0.4rem 1rem;
    border: 0; background: transparent;
    color: var(--text-2);
}
html[data-home="v2"] .sc-tab:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
html[data-home="v2"] .sc-tab[aria-selected="true"] {
    background: var(--grad-cta); color: #fff;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}
html[data-home="v2"] .sc-arrow,
html[data-home="v2"] .sc-next {
    width: 44px; min-width: 44px; padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hair-2);
    box-shadow: none;
    color: #fff;
}
html[data-home="v2"] .sc-arrow:hover { background: rgba(255, 255, 255, 0.14); }
/* The word "Next" made the two arrows different sizes; the arrow says it. */
html[data-home="v2"] .sc-next-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-home="v2"] .sc-progress { margin: 0 2.75rem 1.4rem; height: 3px; border-radius: 3px; overflow: hidden; }

@media (max-width: 900px) {
    html[data-home="v2"] .sc-stage { padding: 2rem 1.4rem 1.25rem; }
    html[data-home="v2"] .sc-nav { padding: 0.25rem 1.4rem 1.2rem; }
    html[data-home="v2"] .sc-progress { margin: 0 1.4rem 1rem; }
    html[data-home="v2"] .sc-tabs { flex: 1 1 auto; margin-inline: 0; }
}
/* site-public.css lets .sc-next grow to fill the row on a phone. */
html[data-home="v2"] .sc-next { flex: 0 0 auto; filter: none; }