/* Miyrako Home — Layout 47 · Floating Card Web */
.page-home {
    background: var(--myr-void);
    color: var(--myr-frost);
}
.page-home .myr-orbit-foot { margin-top: 0; }

.myr-web-world { overflow-x: clip; }
.myr-web-zone {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) var(--myr-pad);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.myr-zone-head { max-width: 640px; margin-bottom: 2.5rem; }
.myr-zone-head h2 { font-family: var(--myr-serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; margin: 0; line-height: 1.25; }
.myr-zone-head h2 em { font-style: normal; color: var(--myr-brass-bright); }
.myr-zone-head__sub { margin: 0.75rem 0 0; color: var(--myr-silk); opacity: 0.75; max-width: 48ch; }

/* §01 Constellation */
.myr-web-zone--constellation {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--myr-bar-h) + 3rem);
    background: radial-gradient(ellipse at 30% 40%, rgba(74,138,136,0.08), transparent 55%),
                radial-gradient(ellipse at 70% 60%, rgba(184,149,106,0.06), transparent 50%),
                var(--myr-void);
}
.myr-web-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--myr-thread); opacity: 0.35; }
.myr-web-lines__path { fill: none; stroke: currentColor; stroke-width: 1; }
.myr-web-lines__path--thin { stroke-dasharray: 4 8; opacity: 0.5; }
.myr-constellation { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; min-height: 520px; }
.myr-constellation__core { position: relative; z-index: 3; max-width: 580px; margin: 0 auto; text-align: center; }
.myr-constellation__title { font-family: var(--myr-serif); font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800; line-height: 1.15; margin: 0 0 1.25rem; }
.myr-constellation__title span { display: block; }
.myr-constellation__accent em { font-style: normal; color: var(--myr-brass-bright); }
.myr-constellation__lead { margin: 0 auto 1.75rem; max-width: 46ch; color: var(--myr-silk); opacity: 0.85; font-size: 0.95rem; }
.myr-constellation__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.myr-constellation__ghost { position: absolute; inset: 10% 15% 5%; z-index: 1; opacity: 0.22; mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); }
.myr-constellation__ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--myr-radius-lg); }
.myr-float-card {
    position: absolute; z-index: 4;
    padding: 0.85rem 1.1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--myr-radius-lg);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    transition: transform 0.4s var(--myr-ease), box-shadow 0.4s;
}
.myr-float-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(0,0,0,0.45); }
.myr-float-card strong { display: block; font-family: var(--myr-serif); font-size: 1.1rem; margin: 0.15rem 0; }
.myr-float-card p { margin: 0; font-size: 0.72rem; color: var(--myr-silk); opacity: 0.7; }
.myr-float-card--tl { top: 8%; left: 4%; }
.myr-float-card--tr { top: 12%; right: 6%; }
.myr-float-card--bl { bottom: 18%; left: 8%; }
.myr-float-card--br { bottom: 12%; right: 4%; }

/* §02 Pulse */
.myr-web-zone--pulse { background: var(--myr-ink); }
.myr-pulse-web {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
    max-width: 900px; margin: 0 auto;
}
.myr-pulse-card {
    flex: 0 1 140px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--myr-radius-lg);
    transform: translateY(calc(var(--i, 0) * -6px + 8px));
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    transition: transform 0.4s var(--myr-ease);
}
.myr-pulse-card:hover { transform: translateY(-8px) scale(1.02); }
.myr-pulse-card__n { font-family: var(--myr-serif); font-size: 2.2rem; font-weight: 700; color: var(--myr-brass-bright); }
.myr-pulse-card__u { font-size: 0.85rem; color: var(--myr-silk); margin-left: 0.15rem; }
.myr-pulse-card p { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--myr-titanium-dim); }

/* §03 Manifesto */
.myr-web-zone--manifesto { background: linear-gradient(135deg, var(--myr-charcoal), var(--myr-ink)); }
.myr-manifesto-web { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2rem; align-items: start; max-width: var(--myr-max); margin: 0 auto; }
.myr-manifesto-web__fig { position: relative; margin: 0; }
.myr-manifesto-web__fig img { width: 100%; border-radius: var(--myr-radius-lg); box-shadow: var(--myr-shadow-layer); }
.myr-manifesto-web__fig figcaption { position: absolute; bottom: 1rem; left: 1rem; }
.myr-manifesto-web__cards { display: flex; flex-direction: column; gap: 1rem; }
.myr-thread-card {
    padding: 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--myr-radius-lg);
}
.myr-thread-card--offset { margin-left: 2rem; }
.myr-thread-card--quote { border-color: var(--myr-thread); background: var(--myr-thread-dim); }
.myr-thread-card h2 { font-family: var(--myr-serif); font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0 0 0.5rem; line-height: 1.3; }
.myr-thread-card h2 em { font-style: normal; color: var(--myr-brass-bright); }
.myr-thread-card blockquote { margin: 0 0 1rem; font-family: var(--myr-serif); font-style: italic; color: var(--myr-silk); }

/* §04 Interactive terrain */
.myr-web-zone--interact { background: var(--myr-void); }
.myr-terrain-web { max-width: 820px; margin: 0 auto; }
.myr-terrain-web__nodes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; justify-content: center; }
.myr-terrain-node {
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: transparent;
    color: var(--myr-silk);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.myr-terrain-node.is-active, .myr-terrain-node:hover { background: var(--myr-brass-dim); border-color: var(--myr-brass); color: var(--myr-brass-bright); }
.myr-terrain-panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--myr-radius-lg);
    box-shadow: var(--myr-shadow-layer);
}
.myr-terrain-panel__visual img { width: 100%; border-radius: var(--myr-radius); transition: opacity 0.3s; }
.myr-terrain-panel__body h3 { font-family: var(--myr-serif); font-size: 1.25rem; margin: 0.35rem 0; }
.myr-terrain-panel__body p { font-size: 0.88rem; color: var(--myr-silk); opacity: 0.8; }
.myr-terrain-bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: 999px; margin: 1rem 0; overflow: hidden; }
.myr-terrain-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--myr-thread), var(--myr-brass)); border-radius: 999px; transition: width 0.5s var(--myr-ease); }

/* §05 Horizontal ribbon */
.myr-web-zone--ribbon { padding-left: 0; padding-right: 0; background: var(--myr-ink); }
.myr-web-zone--ribbon .myr-zone-head { padding-left: var(--myr-pad); padding-right: var(--myr-pad); }
.myr-ribbon-scroll {
    display: flex; gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 var(--myr-pad) 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--myr-brass) transparent;
    cursor: grab;
}
.myr-ribbon-scroll:active { cursor: grabbing; }
.myr-ribbon-scroll::-webkit-scrollbar { height: 4px; }
.myr-ribbon-scroll::-webkit-scrollbar-thumb { background: var(--myr-brass); border-radius: 999px; }
.myr-ribbon-card {
    flex: 0 0 min(320px, 75vw);
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--myr-radius-lg);
    overflow: hidden;
    box-shadow: var(--myr-shadow-layer);
    transform: rotate(-1deg);
    transition: transform 0.4s var(--myr-ease);
}
.myr-ribbon-card:nth-child(even) { transform: rotate(1deg); }
.myr-ribbon-card:hover { transform: rotate(0deg) scale(1.02); }
.myr-ribbon-card img { width: 100%; height: 380px; object-fit: cover; }
.myr-ribbon-card__cap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(8,10,14,0.9), transparent);
}
.myr-ribbon-card__cap span { font-family: var(--myr-mono); font-size: 0.62rem; color: var(--myr-brass); letter-spacing: 0.15em; }
.myr-ribbon-card__cap strong { display: block; font-family: var(--myr-serif); font-size: 1.1rem; margin-top: 0.25rem; }

/* §06 Experimental depth */
.myr-web-zone--depth { padding: 0; overflow: hidden; }
.myr-depth-slice { position: relative; min-height: 520px; }
.myr-depth-slice__mask {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(115deg, var(--myr-void) 42%, transparent 42%);
    clip-path: polygon(0 0, 55% 0, 42% 100%, 0 100%);
}
.myr-depth-slice__fig { margin: 0; height: 100%; }
.myr-depth-slice__fig img { width: 100%; height: 520px; object-fit: cover; }
.myr-depth-slice__card {
    position: absolute; z-index: 3;
    top: 50%; right: clamp(1rem, 8vw, 6rem);
    transform: translateY(-50%);
    width: min(420px, 90%);
    padding: 2rem;
    background: rgba(14,18,24,0.92);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--myr-radius-lg);
    box-shadow: var(--myr-shadow-layer);
}
.myr-depth-slice__card h2 { font-family: var(--myr-serif); font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin: 0 0 0.75rem; }
.myr-depth-slice__card h2 em { font-style: normal; color: var(--myr-thread); }
.myr-depth-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.myr-depth-list li { display: flex; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.85rem; color: var(--myr-silk); border-bottom: 1px solid rgba(255,255,255,0.06); }
.myr-depth-list span { font-family: var(--myr-mono); font-size: 0.68rem; color: var(--myr-brass); min-width: 1.5rem; }

/* §07 Process web */
.myr-web-zone--process { background: var(--myr-charcoal); min-height: 480px; }
.myr-process-web { position: relative; max-width: 900px; margin: 0 auto; min-height: 360px; }
.myr-process-web__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--myr-thread); pointer-events: none; }
.myr-process-node {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    width: min(160px, 28vw);
    padding: 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--myr-radius-lg);
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    transition: transform 0.35s var(--myr-ease);
}
.myr-process-node:hover { transform: translate(-50%, -50%) scale(1.05); z-index: 2; }
.myr-process-node span { font-family: var(--myr-mono); font-size: 0.62rem; color: var(--myr-brass); }
.myr-process-node h3 { font-family: var(--myr-serif); font-size: 0.95rem; margin: 0.25rem 0; }
.myr-process-node p { margin: 0; font-size: 0.68rem; color: var(--myr-silk); opacity: 0.75; line-height: 1.45; }

/* §08 Voices */
.myr-web-zone--voices { background: var(--myr-void); }
.myr-voice-orbit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: var(--myr-max); margin: 0 auto; }
.myr-voice-card {
    padding: 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--myr-radius-lg);
    transform: translateY(calc(var(--depth, 0) * -20px));
    transition: transform 0.4s var(--myr-ease);
}
.myr-voice-card[data-depth="0.08"] { margin-top: 1rem; }
.myr-voice-card[data-depth="0.12"] { margin-top: -0.5rem; }
.myr-voice-card[data-depth="0.06"] { margin-top: 2rem; }
.myr-voice-card:hover { transform: translateY(-8px); }
.myr-voice-card blockquote { margin: 0 0 1rem; font-family: var(--myr-serif); font-size: 0.92rem; line-height: 1.65; font-style: italic; color: var(--myr-silk); }
.myr-voice-card cite { font-size: 0.72rem; color: var(--myr-titanium-dim); font-style: normal; }

/* §09 Trust */
.myr-web-zone--trust { background: linear-gradient(180deg, var(--myr-ink), var(--myr-charcoal)); }
.myr-trust-web { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2rem; align-items: center; max-width: var(--myr-max); margin: 0 auto; }
.myr-trust-web__fig img { width: 100%; border-radius: var(--myr-radius-lg); box-shadow: var(--myr-shadow-layer); }
.myr-trust-web__cards { display: flex; flex-direction: column; gap: 0.85rem; }
.myr-trust-card {
    padding: 1.15rem 1.25rem;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--myr-brass);
    border-radius: 0 var(--myr-radius-lg) var(--myr-radius-lg) 0;
}
.myr-trust-card h3 { font-family: var(--myr-serif); font-size: 1rem; margin: 0.25rem 0; }
.myr-trust-card p { margin: 0; font-size: 0.82rem; color: var(--myr-silk); opacity: 0.8; }

/* §10 Convergence */
.myr-web-zone--converge {
    text-align: center;
    background: radial-gradient(circle at center, rgba(184,149,106,0.08), transparent 60%), var(--myr-void);
    padding-bottom: 5rem;
}
.myr-converge-lines { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); width: min(400px, 80vw); color: var(--myr-thread); pointer-events: none; opacity: 0.4; }
.myr-converge { position: relative; z-index: 2; max-width: 560px; margin: 0 auto 3rem; }
.myr-converge h2 { font-family: var(--myr-serif); font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 0.75rem; }
.myr-converge h2 em { font-style: normal; color: var(--myr-brass-bright); }
.myr-converge p { color: var(--myr-silk); opacity: 0.85; margin: 0 0 1.5rem; }
.myr-converge__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.myr-converge__note { font-size: 0.72rem; color: var(--myr-titanium-dim); }
.myr-converge-products {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
    max-width: 900px; margin: 0 auto;
}
.myr-mini-card {
    width: min(200px, 42vw);
    padding: 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--myr-radius-lg);
    transform: translateY(calc(var(--i, 0) * 8px - 8px));
    transition: transform 0.35s var(--myr-ease);
}
.myr-mini-card:hover { transform: translateY(-6px); }
.myr-mini-card a { display: block; color: inherit; margin-bottom: 0.5rem; }
.myr-mini-card img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--myr-radius); margin-bottom: 0.5rem; }
.myr-mini-card h3 { font-family: var(--myr-serif); font-size: 0.78rem; margin: 0.15rem 0; }
.myr-mini-card p { margin: 0; font-size: 0.72rem; color: var(--myr-brass-bright); }

@media (max-width: 900px) {
    .myr-float-card--tl, .myr-float-card--tr { top: 4%; }
    .myr-float-card--bl, .myr-float-card--br { display: none; }
    .myr-manifesto-web, .myr-trust-web, .myr-terrain-panel { grid-template-columns: 1fr; }
    .myr-thread-card--offset { margin-left: 0; }
    .myr-depth-slice__mask { clip-path: none; background: linear-gradient(to top, var(--myr-void) 30%, transparent); }
    .myr-depth-slice__card { position: relative; top: auto; right: auto; transform: none; width: auto; margin: -4rem var(--myr-pad) 2rem; }
    .myr-process-node { position: relative; left: auto !important; top: auto !important; transform: none !important; width: auto; margin-bottom: 0.75rem; }
    .myr-process-web { min-height: auto; }
    .myr-process-web__lines { display: none; }
    .myr-voice-orbit { grid-template-columns: 1fr; }
    .myr-voice-card[data-depth] { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .myr-float-card, .myr-pulse-card, .myr-ribbon-card, .myr-shop-card { transition: none; }
}