/* ============================================================
   globaltonecare.com — submerged auditory chamber
   Palette:
     #08111A  abyssal indigo
     #0F2A3E  thermocline blue
     #1E4A5C  cenote teal
     #86B2BD  pearl mist
     #E8DDC8  bone bath
     #C9B8E0  abalone violet
     #7BD3C4  spring water
   Typefaces: Fraunces, Commissioner, Cormorant Infant
   ============================================================ */

:root {
    --abyssal:     #08111A;
    --thermo:      #0F2A3E;
    --cenote:      #1E4A5C;
    --pearl:       #86B2BD;
    --bone:        #E8DDC8;
    --abalone:     #C9B8E0;
    --spring:      #7BD3C4;
    --band-bg:     #0F2A3E;

    --iris-grad: linear-gradient(118deg, #C9B8E0 0%, #7BD3C4 38%, #E8DDC8 72%, #C9B8E0 100%);

    --rail-left: 3.2vw;
    --content-left: 14vw;
    --content-right: 9vw;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background-color: var(--abyssal);
    color: var(--pearl);
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 9, "SOFT" 30, "wght" 320;
    font-size: 17px;
    line-height: 1.62;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--band-bg);
    transition: background-color 1400ms ease;
    cursor: none;
    min-height: 100vh;
    position: relative;
}

a { color: inherit; text-decoration: none; cursor: none; }
button { background: none; border: 0; color: inherit; cursor: none; font: inherit; }
ul { list-style: none; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== Caustic ambient water layer ===== */
.caustic-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
    mix-blend-mode: screen;
}
.caustic-layer svg { width: 100%; height: 100%; opacity: 0.22; }

/* ===== Abalone iridescence layer (cursor-reactive) ===== */
.abalone-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
    background:
        conic-gradient(from var(--abalone-rot, 0deg) at var(--cx, 50%) var(--cy, 50%),
            #C9B8E0 0deg,
            #7BD3C4 110deg,
            #E8DDC8 200deg,
            #86B2BD 280deg,
            #C9B8E0 360deg);
    filter: blur(80px) saturate(120%);
    transition: opacity 800ms ease;
}

/* ===== Custom cursor ===== */
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    border: 1px solid var(--abalone);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 18px rgba(201, 184, 224, 0.45);
    mix-blend-mode: screen;
}
.cursor-ripple {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    border: 1px solid var(--abalone);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    mix-blend-mode: screen;
}
.cursor-ripple.emit {
    animation: ripple-emit 1600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ripple-emit {
    0%   { opacity: 0.65; transform: translate3d(var(--rx,0), var(--ry,0), 0) scale(1); }
    100% { opacity: 0;    transform: translate3d(var(--rx,0), var(--ry,0), 0) scale(8); }
}

/* ===== Tonal staff rail ===== */
.tonal-rail {
    position: fixed;
    left: var(--rail-left);
    top: 12vh;
    bottom: 12vh;
    width: 110px;
    z-index: 10;
    pointer-events: none;
}
.tonal-rail svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translateX(var(--rail-bend, 0px));
    transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.staff-line {
    stroke: var(--cenote);
    stroke-width: 0.6;
    opacity: 0.7;
}
.ticks .tick line {
    stroke: var(--cenote);
    stroke-width: 0.7;
    opacity: 0.8;
}
.ticks .tick text {
    fill: var(--pearl);
    font-family: "Commissioner", sans-serif;
    font-size: 9px;
    font-weight: 280;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
}
.ticks .tick.active text { fill: var(--abalone); opacity: 1; }
.ticks .tick.active line { stroke: var(--abalone); opacity: 1; }
.staff-node {
    filter: drop-shadow(0 0 8px rgba(201, 184, 224, 0.85));
    transition: cy 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Brand mark ===== */
.brandmark {
    position: fixed;
    top: 4vh;
    right: 4vw;
    z-index: 12;
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--pearl);
    opacity: 0.82;
}
.brand-prefix { color: var(--cenote); }
.brand-stem { color: var(--bone); margin-left: 0.18em; }

/* ===== Audio affordance ===== */
.audio-affordance {
    position: fixed;
    right: 4vw;
    bottom: 5vh;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 0.5px solid rgba(123, 211, 196, 0.35);
    background: rgba(8, 17, 26, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--spring);
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: lowercase;
    transition: border-color 600ms ease, color 600ms ease, background 600ms ease;
}
.audio-affordance .audio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--spring);
    box-shadow: 0 0 8px rgba(123, 211, 196, 0.7);
    transition: background 600ms ease, box-shadow 600ms ease;
}
.audio-affordance.playing { color: var(--abalone); border-color: rgba(201,184,224,0.5); }
.audio-affordance.playing .audio-dot { background: var(--abalone); box-shadow: 0 0 14px rgba(201,184,224,0.9); animation: dot-pulse 2.6s ease-in-out infinite; }
@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.7); opacity: 0.55; }
}

/* ===== Descent main ===== */
.descent {
    position: relative;
    z-index: 5;
    padding-left: 0;
}

/* ===== Bands ===== */
.band {
    position: relative;
    min-height: 140vh;
    padding-top: 32vh;
    padding-bottom: 32vh;
    padding-left: var(--content-left);
    padding-right: var(--content-right);
    overflow: hidden;
}
.band-meta {
    position: absolute;
    top: 12vh;
    left: var(--content-left);
    right: var(--content-right);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--cenote);
}
.band-meta .hertz-label { color: var(--pearl); opacity: 0.78; }
.band-meta .band-index {
    color: var(--bone);
    font-family: "Cormorant Infant", serif;
    font-size: 1.1rem;
    font-style: italic;
    letter-spacing: 0;
    opacity: 0.7;
}

/* ===== Oscilloscope ribbon ===== */
.oscilloscope {
    position: absolute;
    top: 18vh;
    left: var(--content-left);
    right: var(--content-right);
    width: auto;
    height: 60px;
    opacity: 0.55;
}
.osc-path {
    fill: none;
    stroke: var(--pearl);
    stroke-width: 0.8;
    stroke-linecap: round;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 2400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.band.in-view .osc-path { stroke-dashoffset: 0; }

/* ===== Cymatic plates ===== */
.cymatic-plate {
    position: absolute;
    width: 26vw;
    max-width: 360px;
    height: auto;
    opacity: 0.6;
}
.cymatic-right {
    right: -4vw;
    top: 35vh;
}
.cymatic-plate g {
    transform-origin: 100px 100px;
    animation: slow-rotate 200s linear infinite;
}
@keyframes slow-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===== Mineral terminators ===== */
.mineral-terminator {
    position: absolute;
    bottom: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 56px;
    opacity: 0.7;
}

/* ===== Band content shell ===== */
.band-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

/* ===== Section 1 :: SURFACE ===== */
.band-surface {
    background-color: var(--thermo);
    min-height: 110vh;
    padding-top: 40vh;
    padding-bottom: 28vh;
}
.surface-stage {
    position: relative;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: 1080px;
}
.opening-sentence {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 280;
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    line-height: 1.45;
    letter-spacing: -0.018em;
    color: var(--bone);
    max-width: 32em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1800ms ease, transform 1800ms ease;
}
.band.in-view .opening-sentence { opacity: 1; transform: translateY(0); }

.iridescent-glyph {
    background: var(--iris-grad);
    background-size: 400% 400%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05em;
    animation: iris-shift 40s linear infinite;
    padding: 0 0.04em;
}
@keyframes iris-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.begin-descent {
    margin-top: 9vh;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--spring);
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    transition: color 700ms ease, gap 700ms ease;
}
.begin-descent .bd-line {
    width: 64px;
    height: 0.5px;
    background: var(--spring);
    transition: width 700ms cubic-bezier(0.16,1,0.3,1), background 700ms ease;
}
.begin-descent:hover { color: var(--abalone); gap: 28px; }
.begin-descent:hover .bd-line { width: 96px; background: var(--abalone); }

/* ===== Section 2 :: THERMOCLINE ===== */
.band-thermocline {
    background-color: var(--thermo);
}
.band-heading {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" var(--soft, 30), "wght" 320;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.024em;
    color: var(--bone);
    margin-bottom: 6vh;
    transition: font-variation-settings 1400ms ease;
    max-width: 14em;
}
.band.in-view .band-heading { --soft: 100; }

.dropcap {
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.4em;
    line-height: 0.8;
    color: var(--bone);
    padding-right: 0.04em;
}

.band-prose p {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 9, "SOFT" 30, "wght" 320;
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--pearl);
    margin-bottom: 2.2em;
    max-width: 36em;
}
.band-prose-lead {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 14, "SOFT" 50, "wght" 320;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--pearl);
    margin-bottom: 8vh;
    max-width: 38em;
    opacity: 0.92;
}

.ceremonial-quote {
    margin-top: 12vh;
    margin-left: 2em;
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.4;
    color: var(--bone);
    max-width: 22em;
    border-left: 0.5px solid var(--cenote);
    padding-left: 2em;
    opacity: 0.92;
}

/* ===== Section 3 :: MODALITIES — Hex grid ===== */
.band-modalities { background-color: #091823; }

.hex-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 4vw 6vw;
    max-width: 760px;
    transform: rotate(-14deg);
    transform-origin: 30% 50%;
    margin-top: 4vh;
}
.hex-cell {
    position: relative;
    transform: rotate(0deg);
}
.hex-cell:nth-child(2) { transform: translateY(40px); }
.hex-cell:nth-child(3) { transform: translateY(-30px); }
.hex-cell:nth-child(4) { transform: translateY(20px); }

.hex-shape {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 115;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hex-shape svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hex-shape svg polygon { transition: stroke 700ms ease, fill 700ms ease; }

.hex-inner {
    position: absolute;
    inset: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transform: rotate(14deg);
}
.hex-num {
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: lowercase;
    color: var(--cenote);
    margin-bottom: 0.6em;
}
.hex-title {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 300;
    font-style: normal;
    font-size: 1.6rem;
    color: var(--bone);
    margin-bottom: 0.5em;
    letter-spacing: -0.012em;
}
.hex-desc {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 9, "SOFT" 30, "wght" 320;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--pearl);
    opacity: 0.85;
    margin-bottom: 0.8em;
}
.hex-hz {
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--abalone);
    text-transform: lowercase;
}
.hex-cell:hover .hex-shape { transform: scale(1.04); }
.hex-cell:hover .hex-shape svg polygon { stroke: var(--abalone); }

/* ===== Section 4 :: PRACTITIONERS ===== */
.band-practitioners { background-color: #0A1A28; }
.practitioner-roll {
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    gap: 2.2em;
}
.practitioner-roll li {
    display: flex;
    align-items: baseline;
    gap: 1.2em;
    padding-left: 2em;
    border-left: 0.5px solid var(--cenote);
    transition: border-color 700ms ease, padding-left 700ms cubic-bezier(0.16,1,0.3,1);
}
.practitioner-roll li:hover {
    border-left-color: var(--abalone);
    padding-left: 2.6em;
}
.prac-name {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 70, "wght" 280;
    font-style: italic;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    color: var(--bone);
    letter-spacing: -0.012em;
}
.prac-hz {
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--cenote);
    text-transform: lowercase;
}
.practitioner-roll li:hover .prac-hz { color: var(--abalone); }

/* ===== Section 5 :: LOCATIONS ===== */
.band-locations { background-color: var(--abyssal); }
.location-list {
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    gap: 1.6em;
}
.loc {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1em;
    padding-bottom: 1.2em;
    border-bottom: 0.5px dashed rgba(30, 74, 92, 0.55);
    transition: border-color 700ms ease;
}
.loc:hover { border-bottom-color: rgba(201, 184, 224, 0.7); }
.loc-city {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 320;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    color: var(--bone);
    letter-spacing: -0.018em;
}
.loc-divider { display: none; }
.loc-hz {
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--pearl);
    text-transform: lowercase;
    opacity: 0.78;
}

/* ===== Section 6 :: RETURN ===== */
.band-return {
    background-color: var(--thermo);
    min-height: 120vh;
    padding-top: 30vh;
    padding-bottom: 22vh;
}
.return-content {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 8vh;
}
.closing-sentence {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 280;
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.45;
    color: var(--bone);
    letter-spacing: -0.014em;
    max-width: 30em;
}
.contact-line {
    display: flex;
    align-items: baseline;
    gap: 1.5em;
    padding-top: 4vh;
    border-top: 0.5px solid var(--cenote);
    max-width: 32em;
}
.contact-label {
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    color: var(--cenote);
    text-transform: lowercase;
}
.contact-link {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 70, "wght" 320;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--spring);
    transition: color 700ms ease;
}
.contact-link:hover { color: var(--abalone); }
.colophon {
    font-family: "Commissioner", sans-serif;
    font-weight: 280;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--cenote);
    opacity: 0.78;
    padding-top: 8vh;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ===== Smaller screens ===== */
@media (max-width: 900px) {
    :root {
        --content-left: 14vw;
        --content-right: 6vw;
    }
    .tonal-rail { width: 70px; }
    .ticks .tick text { font-size: 8px; }
    .cymatic-plate { width: 36vw; opacity: 0.4; }
    .hex-grid { grid-template-columns: 1fr; transform: rotate(-7deg); }
    .hex-cell:nth-child(2),
    .hex-cell:nth-child(3),
    .hex-cell:nth-child(4) { transform: none; }
    .hex-inner { transform: rotate(7deg); }
    .audio-affordance .audio-label { display: none; }
    .audio-affordance { padding: 10px; }
}
@media (max-width: 600px) {
    :root { --content-left: 18vw; }
    .band-meta { font-size: 0.62rem; }
    .opening-sentence { font-size: 1.4rem; }
    .band-heading { font-size: 1.8rem; }
    .practitioner-roll li { flex-direction: column; gap: 0.2em; padding-left: 1.2em; }
    .loc { grid-template-columns: 1fr; }
}