/* Interaction:** sealed hexagons refuse touch with a shake-error gesture. */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: #0a0a0c;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #0a0a0c;
    color: #f0ece4;
    font-family: "Quicksand", "Zen Maru Gothic", "Interaction:**", ui-rounded, "Avenir Next", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}

main {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(90, 158, 143, 0.08), transparent 30vw),
        radial-gradient(circle at 82% 42%, rgba(196, 98, 58, 0.06), transparent 28vw),
        #0a0a0c;
}

main::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        linear-gradient(to top, rgba(140, 160, 170, 0.08) 0%, transparent 42%),
        repeating-linear-gradient(108deg, transparent 0 42px, rgba(240, 236, 228, 0.012) 43px 44px);
    animation: steamDrift 12s ease-in-out infinite alternate;
}

.bubble-field,
.steam-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bubble-field { z-index: 6; }
.steam-overlay { z-index: 5; }

.bubble {
    position: absolute;
    left: var(--x);
    bottom: -64px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 30% 30%, #d4eff0 0%, rgba(212, 239, 240, 0.38) 24%, transparent 60%);
    box-shadow: inset 0 -4px 8px rgba(10, 10, 12, 0.3), 0 0 18px rgba(90, 158, 143, 0.12);
    animation: rise var(--duration) var(--delay) infinite cubic-bezier(0.2, 0.8, 0.3, 1);
}

.threshold {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aperture {
    width: 0;
    height: 0;
    overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 99% 74%, 50% 100%, 1% 75%, 0% 25%);
    transition: width 2.5s cubic-bezier(0.16, 1, 0.3, 1), height 2.5s cubic-bezier(0.16, 1, 0.3, 1), filter 2.5s ease;
    filter: drop-shadow(0 0 0 rgba(90, 158, 143, 0));
}

.aperture.open {
    width: 55vw;
    height: 55vh;
    filter: drop-shadow(0 0 38px rgba(90, 158, 143, 0.18));
}

.aperture-water {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 60%, #1b3a3a 0%, #0a0a0c 80%),
        linear-gradient(120deg, rgba(212, 239, 240, 0.08), transparent 35%, rgba(90, 158, 143, 0.1));
}

.aperture-water::before,
.aperture-water::after {
    content: "";
    position: absolute;
    inset: -10%;
    background: repeating-radial-gradient(ellipse at 50% 60%, transparent 0 18px, rgba(212, 239, 240, 0.035) 19px 21px, transparent 22px 42px);
    animation: waterPulse 6s ease-in-out infinite alternate;
}

.aperture-water::after {
    transform: rotate(18deg);
    opacity: 0.55;
    animation-duration: 4s;
}

.domain-title {
    position: relative;
    z-index: 1;
    font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    font-weight: 600;
    font-size: clamp(2.5rem, 8vw, 6rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #f0ece4;
    text-shadow: 0 0 40px rgba(90, 158, 143, 0.15);
    white-space: nowrap;
}

.domain-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(calc((var(--i) % 3 - 1) * 10px));
    animation: letterAppear 0.9s ease forwards, floatLetter 4s ease-in-out infinite alternate;
    animation-delay: calc(1.1s + var(--i) * 0.075s), calc(2s + var(--i) * 0.04s);
}

.descent {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 6rem 0 5rem;
}

.honeycomb-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 6px;
    align-items: center;
}

.hex-cell {
    position: relative;
    grid-column: span 2;
    aspect-ratio: 1.1547 / 1;
    clip-path: polygon(50% 0%, 100% 25%, 99% 74%, 51% 100%, 0% 76%, 1% 25%);
    background: #1a1a1e;
    cursor: default;
    transition: background 0.6s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.6s ease, filter 0.6s ease;
}

.hex-cell:nth-child(n+5) { margin-top: -10%; }
.offset-start { grid-column-start: 2; }

.hex-cell:hover {
    background: #1b3a3a;
    clip-path: polygon(50% 1%, 99% 24%, 100% 76%, 49% 100%, 1% 75%, 0% 24%);
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

.hex-cell.neighbor-push {
    transform: translate(var(--push-x, 0), var(--push-y, 2px)) scale(0.985);
}

.hex-cell.basin {
    grid-column: span 3;
    aspect-ratio: 1.1547 / 1;
}

.hex-surface {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15%;
    overflow: hidden;
    background-image: var(--crackle);
    background-size: 210px 210px;
}

.hex-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 42%, rgba(212, 239, 240, 0.06), transparent 55%);
    opacity: 0.65;
}

.hex-cell p,
.hex-icon,
.hex-label,
.quiet-mark {
    position: relative;
    z-index: 1;
}

.hex-cell p {
    color: #f0ece4;
    font-size: clamp(0.72rem, 1.15vw, 0.95rem);
    line-height: 1.6;
    text-align: center;
    opacity: 0.88;
}

.basin-depth {
    box-shadow: inset 0 0 48px rgba(10, 10, 12, 0.85), inset 0 -24px 52px rgba(27, 58, 58, 0.45);
}

.basin p {
    max-height: 82%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: left;
    font-weight: 500;
    opacity: 1;
}

.hex-label,
.quiet-mark {
    font-family: "Zen Maru Gothic", Interaction, ui-rounded, system-ui, sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: #5a9e8f;
}

.quiet-mark {
    color: rgba(240, 236, 228, 0.16);
    font-size: clamp(1.3rem, 4vw, 3rem);
}

.hex-icon {
    width: clamp(38px, 6vw, 62px);
    height: clamp(38px, 6vw, 62px);
    margin-bottom: 0.45rem;
    fill: none;
    stroke: #5a9e8f;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kintsugi::after,
.rust-vein::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(50% 0%, 100% 25%, 99% 74%, 51% 100%, 0% 76%, 1% 25%);
    background:
        linear-gradient(42deg, transparent 0 44%, rgba(196, 164, 90, 0.42) 44.4% 45.1%, transparent 45.5%),
        linear-gradient(138deg, transparent 0 61%, rgba(196, 98, 58, 0.42) 61.4% 62%, transparent 62.4%);
}

.sealed .hex-surface::after,
.cracked::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: var(--crackle);
    background-size: 180px 180px;
    transition: opacity 0.3s ease;
}

.sealed:hover .hex-surface::after,
.sealed.shaking .hex-surface::after { opacity: 0.2; }

.sealed.shaking { animation: shake 0.5s ease; }

.overflow-section {
    position: relative;
    z-index: 2;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0) 0%, #0a0a0c 32%, #000 100%);
}

.ghost-echo {
    font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: -0.02em;
    color: #f0ece4;
    opacity: 0.18;
    animation: floatLetter 6s ease-in-out infinite alternate;
}

@keyframes rise {
    0% { transform: translateY(100vh) scale(0.4); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

@keyframes steamDrift {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

@keyframes waterPulse {
    from { transform: translateY(-4px) scale(1); opacity: 0.45; }
    to { transform: translateY(6px) scale(1.06); opacity: 0.8; }
}

@keyframes letterAppear {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floatLetter {
    from { translate: 0 -4px; }
    to { translate: 0 4px; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-3px) rotate(-0.5deg); }
    30%, 60%, 90% { transform: translateX(3px) rotate(0.5deg); }
}

:root {
    --rust-stain: #c4623a;
    --crackle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cpath d='M18 8 78 31 60 88 11 71M88 5l63 18-22 61-56-17M145 16l58 27-23 54-54-22M6 82l61 20-22 60L0 143M72 76l59 21-19 59-57-21M137 86l58 20-19 61-57-22M16 151l61 20-22 35M82 146l61 20-22 40M148 156l57 20' fill='none' stroke='%23f0ece4' stroke-width='.7' stroke-opacity='.7'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
    .aperture.open { width: 84vw; height: 48vh; }
    .descent { width: min(94vw, 620px); padding-top: 3rem; }
    .honeycomb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hex-cell { grid-column: span 2; }
    .hex-cell.basin { grid-column: span 4; }
    .offset-start { grid-column-start: auto; }
    .basin p { writing-mode: horizontal-tb; text-align: center; }
}

@media (max-width: 460px) {
    .aperture.open { width: 92vw; height: 42vh; }
    .domain-title { font-size: clamp(2.15rem, 11vw, 3.4rem); }
    .honeycomb-grid { gap: 4px; }
    .hex-cell:nth-child(n+5) { margin-top: -6%; }
    .hex-surface { padding: 13%; }
}