/* =========================================================
   tsundere.boo — Chrome-Leather Depth System
   Palette:
     Chrome Deep:    #1C1E22
     Chrome Mid:     #2E3238
     Chrome Silver:  #8A9099
     Chrome Light:   #C8CDD4
     Chrome Gleam:   #E8EAED
     Leather Deep:   #3D2010
     Leather Mid:    #7A4020
     Leather Warm:   #C47B3A
     Leather Grain:  #E8C49A
     Ripple Glow:    #4A6070
   Fonts: Cormorant Garamond (300/600/italic), EB Garamond (400)
========================================================= */

/* =========================================================
   CSS CUSTOM PROPERTIES — Full Palette
========================================================= */

:root {
    --chrome-deep:    #1C1E22;
    --chrome-mid:     #2E3238;
    --chrome-silver:  #8A9099;
    --chrome-light:   #C8CDD4;
    --chrome-warm:    #C0C8D0;  /* used for secondary display text */
    --chrome-gleam:   #E8EAED;
    --leather-deep:   #3D2010;
    --leather-mid:    #7A4020;
    --leather-warm:   #C47B3A;
    --leather-grain:  #E8C49A;
    --parchment-warm: #D4C5A9;  /* body text on dark backgrounds */
    --ripple-glow:    #4A6070;
}

/* =========================================================
   RESET & BASE
========================================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: #1C1E22;
    color: #C8CDD4;
    font-family: 'EB Garamond', Georgia, serif;
    overflow-x: hidden;
    /* Perspective scroll container */
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

/* =========================================================
   TYPOGRAPHY SYSTEM
========================================================= */

.domain-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(48px, 8vw, 96px);
    color: #E8EAED;
    letter-spacing: 0.04em;
    line-height: 1;
}

.domain-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 13px;
    color: #8A9099;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: block;
    margin-top: 18px;
}

/* Secondary display labels — Warm Chrome #C0C8D0 */
.section-label-secondary {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 22px;
    color: #C0C8D0;
    letter-spacing: 0.15em;
}

/* Parchment warm body text #D4C5A9 — for mixed-bg contexts */
.body-parchment {
    color: #D4C5A9;
}

.stratum-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 11px;
    color: #8A9099;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: block;
}

.stratum-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(40px, 5vw, 72px);
    color: #E8EAED;
    line-height: 1.1;
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}

.stratum-title-warm {
    color: #E8C49A;
}

.stratum-body {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.85;
    color: #C8CDD4;
    margin-bottom: 20px;
}

.stratum-body-warm {
    color: #E8C49A;
}

.depth-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 11px;
    color: #4A6070;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* =========================================================
   SECTION BASE
========================================================= */

.stratum {
    position: relative;
    width: 100%;
    overflow: hidden;
    transform-style: preserve-3d;
}

.stratum-hidden {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.stratum-visible {
    opacity: 1;
}

/* Depth markers */
.depth-marker {
    position: absolute;
    bottom: 32px;
    right: 48px;
    z-index: 10;
}

/* =========================================================
   SVG BLOB BACKGROUNDS — pushed back in Z
========================================================= */

.blob-bg-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-100px) scale(1.15);
    width: 90%;
    max-width: 900px;
    z-index: 0;
    pointer-events: none;
}

.blob-bg {
    width: 100%;
    height: auto;
    filter: blur(80px);
    opacity: 0.6;
}

.blob-chrome {
    fill: #2E3238;
}

.blob-chrome-mid {
    fill: #2E3238;
    opacity: 0.7;
}

.blob-chrome-recede {
    fill: #1C1E22;
    opacity: 0.5;
}

.blob-closing {
    fill: #2E3238;
    opacity: 0.55;
}

/* =========================================================
   STRATUM ZERO — Chrome Surface Hero
========================================================= */

#stratum-zero {
    height: 100vh;
    background-color: #1C1E22;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 18vh;
}

/* Chrome sheen overlay */
#stratum-zero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.08) 0%,
        transparent 40%,
        rgba(255,255,255,0.04) 70%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Ripple container (absolute, centered) */
.ripple-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.ripple-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #4A6070;
    transform: translate(-50%, -50%);
    animation: ripple-expand 12s ease-out infinite;
    top: 0;
    left: 0;
}

.ripple-ring.r1 { width: 100px; height: 100px; opacity: 0.6; animation-delay: 0s; }
.ripple-ring.r2 { width: 100px; height: 100px; opacity: 0.5; animation-delay: 1.7s; }
.ripple-ring.r3 { width: 100px; height: 100px; opacity: 0.45; animation-delay: 3.4s; }
.ripple-ring.r4 { width: 100px; height: 100px; opacity: 0.35; animation-delay: 5.1s; }
.ripple-ring.r5 { width: 100px; height: 100px; opacity: 0.25; animation-delay: 6.8s; }
.ripple-ring.r6 { width: 100px; height: 100px; opacity: 0.2; animation-delay: 8.5s; }
.ripple-ring.r7 { width: 100px; height: 100px; opacity: 0.15; animation-delay: 10.2s; }

@keyframes ripple-expand {
    0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.6; }
    80%  { opacity: 0.1; }
    100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* Domain name (fades in after 2s) */
.domain-name-wrap {
    position: relative;
    z-index: 5;
    text-align: center;
    opacity: 0;
    animation: fade-in-domain 1.5s ease forwards;
    animation-delay: 2s;
    transform: translateZ(0);
}

@keyframes fade-in-domain {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: scroll-hint-fade 2s ease 4s both;
}

@keyframes scroll-hint-fade {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

.scroll-hint-line {
    display: block;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #D4C5A9, transparent);
    animation: scroll-line-move 2s ease-in-out infinite;
}

@keyframes scroll-line-move {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================
   STRATUM ONE — Float Content
========================================================= */

#stratum-one {
    min-height: 120vh;
    background: linear-gradient(180deg, #1C1E22 0%, #2E3238 60%, #1C1E22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 80px;
}

.stratum-one-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    gap: 60px;
    position: relative;
    z-index: 5;
    transform: translateZ(0);
}

/* Text panel with blob clip */
.text-panel-left {
    flex: 0 0 45%;
}

.blob-clip-container {
    position: relative;
}

.blob-clip-one {
    background: #2E3238;
    clip-path: polygon(
        0% 8%, 5% 0%, 95% 0%, 100% 5%,
        100% 90%, 97% 100%, 5% 100%, 0% 95%
    );
    /* Organic-feel via SVG clip simulation with border-radius curves */
    border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%;
    box-shadow: 0 40px 120px rgba(0,0,0,0.4);
    padding: 60px 64px;
    transition: clip-path 0.8s ease;
}

.blob-clip-one::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0%,
        transparent 50%,
        rgba(255,255,255,0.02) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

.panel-content {
    position: relative;
    z-index: 1;
}

/* Leather panel */
.leather-panel-right {
    flex: 0 0 50%;
}

.leather-surface {
    height: 480px;
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    background-color: #3D2010;
    background-image:
        repeating-linear-gradient(3deg, rgba(122,64,32,0.15) 0px, transparent 1px),
        repeating-linear-gradient(7deg, rgba(122,64,32,0.12) 0px, transparent 1px),
        repeating-linear-gradient(-4deg, rgba(196,123,58,0.08) 0px, transparent 1px);
    filter: url(#leather-noise);
    box-shadow: 0 40px 120px rgba(0,0,0,0.5), inset 0 1px 0 rgba(196,123,58,0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 40px 48px;
}

.leather-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(196,123,58,0.1) 0%,
        transparent 50%,
        rgba(122,64,32,0.2) 100%
    );
}

.leather-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #C47B3A 40%, #C47B3A 60%, transparent 100%);
    opacity: 0.5;
}

.leather-caption {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #C0C8D0;
    text-transform: lowercase;
    position: relative;
    z-index: 1;
}

/* =========================================================
   STRATUM TWO — Ripple Ring Text Layout
========================================================= */

#stratum-two {
    min-height: 100vh;
    background: linear-gradient(180deg, #1C1E22 0%, #2E3238 40%, #2A2410 80%, #1C1E22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ripple-text-system {
    position: relative;
    width: min(90vmin, 700px);
    height: min(90vmin, 700px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transform: translateZ(0);
}

.ripple-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

.ripple-core-word {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 48px;
    color: #E8C49A;
    letter-spacing: 0.08em;
}

/* Ripple ring text containers */
.ripple-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid #4A6070;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transform: translate(-50%, -50%);
    overflow: visible;
}

/* Ring sizes — from innermost to outermost */
.ring-text-1 { width: 160px;  height: 160px;  border-color: rgba(196,123,58,0.5); }
.ring-text-2 { width: 280px;  height: 280px;  border-color: rgba(74,96,112,0.55); }
.ring-text-3 { width: 400px;  height: 400px;  border-color: rgba(74,96,112,0.45); }
.ring-text-4 { width: 520px;  height: 520px;  border-color: rgba(74,96,112,0.3);  }
.ring-text-5 { width: 650px;  height: 650px;  border-color: rgba(74,96,112,0.15); }

/* Text positioned on the top arc of each ring */
.ring-text-content {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    text-align: center;
    background: transparent;
    padding: 0 8px;
}

.ring-text-1 .ring-text-content {
    font-size: 12px;
    color: #C47B3A;
    letter-spacing: 0.15em;
    font-style: italic;
}

.ring-text-2 .ring-text-content {
    font-size: 12px;
    color: #C8CDD4;
    letter-spacing: 0.1em;
}

.ring-text-3 .ring-text-content {
    font-size: 11px;
    color: #8A9099;
    letter-spacing: 0.08em;
}

.ring-text-4 .ring-text-content {
    font-size: 11px;
    color: #4A6070;
    letter-spacing: 0.06em;
}

.ring-text-5 .ring-text-content {
    font-size: 10px;
    color: rgba(74,96,112,0.5);
    letter-spacing: 0.06em;
}

/* Structural ripple rings (decorative, animated) */
.ripple-structural {
    z-index: 1;
}

.ripple-ring-structural {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #4A6070;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
    animation: ripple-expand-slow 8s ease-out infinite;
}

.rs1 { width: 80px;  height: 80px;  opacity: 0.5; animation-delay: 0s; }
.rs2 { width: 80px;  height: 80px;  opacity: 0.4; animation-delay: 2s; }
.rs3 { width: 80px;  height: 80px;  opacity: 0.3; animation-delay: 4s; }
.rs4 { width: 80px;  height: 80px;  opacity: 0.2; animation-delay: 6s; }

@keyframes ripple-expand-slow {
    0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

/* =========================================================
   STRATUM THREE — Leather Warmth
========================================================= */

#stratum-three {
    min-height: 100vh;
    background: linear-gradient(180deg, #1C1E22 0%, #3D2010 35%, #2E1A08 70%, #1C1E22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 40px;
}

/* Leather grain texture on the section itself */
#stratum-three::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(3deg, rgba(122,64,32,0.08) 0px, transparent 1px),
        repeating-linear-gradient(7deg, rgba(122,64,32,0.06) 0px, transparent 1px),
        repeating-linear-gradient(-4deg, rgba(196,123,58,0.04) 0px, transparent 1px);
    pointer-events: none;
    z-index: 1;
}

.blob-bg-three {
    opacity: 0.4;
}

.blob-bg-four {
    opacity: 0.5;
}

/* Center blob + text */
.center-blob-wrap {
    position: relative;
    width: min(600px, 90vw);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transform: translateZ(20px);
}

.center-blob-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.leather-blob-bg {
    /* Leather texture via filter */
    filter: url(#leather-noise);
}

.center-blob-outline {
    stroke-opacity: 0.6;
}

/* Text inside blob */
.center-blob-text {
    position: relative;
    z-index: 6;
    padding: 80px 80px;
    max-width: 440px;
    text-align: center;
}

/* Amber accent line */
.amber-accent-line {
    position: absolute;
    left: 50%;
    bottom: 15%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C47B3A, transparent);
    opacity: 0.4;
    z-index: 3;
}

/* =========================================================
   STRATUM FOUR — Chrome Returns
========================================================= */

#stratum-four {
    min-height: 80vh;
    background: linear-gradient(180deg, #1C1E22 0%, #2E3238 50%, #1C1E22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 80px;
}

/* Chrome sheen returns */
#stratum-four::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0%,
        transparent 40%,
        rgba(255,255,255,0.03) 70%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Leather grain bleeds through */
.leather-grain-overlay {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(3deg, rgba(122,64,32,0.06) 0px, transparent 1px),
        repeating-linear-gradient(7deg, rgba(122,64,32,0.05) 0px, transparent 1px),
        repeating-linear-gradient(-4deg, rgba(196,123,58,0.03) 0px, transparent 1px);
    pointer-events: none;
    z-index: 1;
}

/* Closing ripples (slow — 24s cycle) */
.ripple-closing {
    z-index: 2;
}

.ripple-ring-slow {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #4A6070;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
    animation: ripple-expand-closing 24s ease-out infinite;
}

.rs-s1 { width: 80px; height: 80px; opacity: 0.4; animation-delay: 0s; }
.rs-s2 { width: 80px; height: 80px; opacity: 0.35; animation-delay: 4.8s; }
.rs-s3 { width: 80px; height: 80px; opacity: 0.28; animation-delay: 9.6s; }
.rs-s4 { width: 80px; height: 80px; opacity: 0.2; animation-delay: 14.4s; }
.rs-s5 { width: 80px; height: 80px; opacity: 0.15; animation-delay: 19.2s; }

@keyframes ripple-expand-closing {
    0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(25); opacity: 0; }
}

/* Closing text */
.closing-wrap {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
}

.closing-text-container {
    background: #2E3238;
    border-radius: 45% 55% 55% 45% / 50% 50% 50% 50%;
    padding: 80px 100px;
    max-width: 640px;
    text-align: center;
    box-shadow: 0 40px 120px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.closing-text-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.07) 0%,
        transparent 50%,
        rgba(255,255,255,0.02) 100%
    );
    pointer-events: none;
}

.closing-title {
    color: #C8CDD4;
}

.closing-body {
    color: #C8CDD4;
}

.closing-domain {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(74,96,112,0.25);
}

.closing-domain-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 28px;
    color: #E8EAED;
    letter-spacing: 0.08em;
}

/* =========================================================
   BLOB MORPHING ANIMATIONS
========================================================= */

/* Chromatic blob morphing — 30s very slow breathing */
@keyframes blob-morph-chrome {
    0%   { d: path("M400,100 C550,80 700,180 720,340 C740,500 640,660 480,700 C320,740 150,660 110,500 C70,340 130,180 260,120 C310,98 350,104 400,100Z"); }
    33%  { d: path("M420,90 C580,60 720,170 730,350 C740,530 630,670 460,705 C290,740 140,655 100,490 C60,325 140,165 285,108 C335,90 370,100 420,90Z"); }
    66%  { d: path("M385,110 C535,70 695,185 715,355 C735,525 625,665 465,698 C305,731 145,648 105,492 C65,336 125,172 265,118 C318,102 358,108 385,110Z"); }
    100% { d: path("M400,100 C550,80 700,180 720,340 C740,500 640,660 480,700 C320,740 150,660 110,500 C70,340 130,180 260,120 C310,98 350,104 400,100Z"); }
}

.blob-chrome {
    animation: blob-morph-chrome 30s ease-in-out infinite;
}

@keyframes blob-morph-one {
    0%   { d: path("M450,60 C620,40 800,140 820,320 C840,480 720,600 560,650 C400,700 220,650 140,500 C60,350 100,160 240,90 C310,60 370,70 450,60Z"); }
    50%  { d: path("M470,50 C640,30 810,155 825,335 C840,495 715,610 545,655 C375,700 200,645 125,495 C50,345 98,155 248,82 C320,55 385,62 470,50Z"); }
    100% { d: path("M450,60 C620,40 800,140 820,320 C840,480 720,600 560,650 C400,700 220,650 140,500 C60,350 100,160 240,90 C310,60 370,70 450,60Z"); }
}

.blob-chrome-mid {
    animation: blob-morph-one 35s ease-in-out infinite;
}

/* Center blob morphing */
@keyframes center-blob-morph {
    0%   { d: path("M300,50 C420,30 520,100 540,230 C560,360 480,450 350,470 C220,490 110,420 90,300 C70,180 130,80 220,55 C255,44 275,54 300,50Z"); }
    33%  { d: path("M310,45 C435,22 530,98 548,235 C566,368 475,455 340,472 C205,489 100,415 82,295 C64,175 128,74 225,50 C262,40 282,50 310,45Z"); }
    66%  { d: path("M295,58 C415,35 518,106 535,238 C552,368 468,452 342,468 C216,484 108,416 90,296 C72,176 135,84 225,60 C258,50 270,60 295,58Z"); }
    100% { d: path("M300,50 C420,30 520,100 540,230 C560,360 480,450 350,470 C220,490 110,420 90,300 C70,180 130,80 220,55 C255,44 275,54 300,50Z"); }
}

.center-blob-path {
    animation: center-blob-morph 25s ease-in-out infinite;
}

/* Closing blob morph */
@keyframes blob-morph-closing {
    0%   { d: path("M400,80 C560,60 720,170 740,340 C760,510 650,660 490,700 C330,740 160,660 110,490 C60,320 130,160 270,100 C320,80 360,88 400,80Z"); }
    50%  { d: path("M415,72 C578,48 735,162 752,338 C769,514 652,665 485,698 C318,731 152,655 102,483 C52,311 128,148 274,94 C326,74 370,80 415,72Z"); }
    100% { d: path("M400,80 C560,60 720,170 740,340 C760,510 650,660 490,700 C330,740 160,660 110,490 C60,320 130,160 270,100 C320,80 360,88 400,80Z"); }
}

.blob-closing {
    animation: blob-morph-closing 40s ease-in-out infinite;
}

/* =========================================================
   CURSOR RIPPLE
========================================================= */

.cursor-ripple {
    position: fixed;
    border-radius: 50%;
    border: 1px solid rgba(74,96,112,0.4);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(0);
    animation: cursor-ripple-out 1.5s ease-out forwards;
}

@keyframes cursor-ripple-out {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .stratum-one-inner {
        flex-direction: column;
        padding: 0;
    }

    .text-panel-left,
    .leather-panel-right {
        flex: none;
        width: 100%;
    }

    .leather-surface {
        height: 260px;
    }

    #stratum-one {
        padding: 80px 32px;
    }

    .ripple-text-system {
        width: min(90vmin, 500px);
        height: min(90vmin, 500px);
    }

    .ring-text-5 { display: none; }
    .ring-text-4 .ring-text-content { font-size: 9px; }

    .center-blob-text {
        padding: 60px 40px;
    }

    .closing-text-container {
        padding: 60px 48px;
    }
}

@media (max-width: 600px) {
    .domain-name {
        font-size: clamp(36px, 10vw, 56px);
    }

    .stratum-title {
        font-size: clamp(30px, 7vw, 48px);
    }

    .blob-clip-one {
        padding: 40px 36px;
    }

    .ring-text-4, .ring-text-5 { display: none; }

    .ripple-text-system {
        width: 90vmin;
        height: 90vmin;
    }
}