/* paragram.dev — chrome-metallic timeline, evolved-minimal, pastoral-romantic */

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

html, body {
    background: #E8E8F0;
    color: #404050;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

/* ============================================================
   STUDIO ENTRANCE
   ============================================================ */
.studio-entrance {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(208, 208, 224, 0.55) 0%, transparent 60%),
        linear-gradient(135deg, #E8E8F0 0%, #C0C0D0 50%, #E8E8F0 100%);
    background-size: 100% 100%, 200% 200%;
    background-position: 0 0, 0% 0%;
    animation: chromeShift 30s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@keyframes chromeShift {
    0%   { background-position: 0 0, 0% 0%; }
    50%  { background-position: 0 0, 100% 100%; }
    100% { background-position: 0 0, 0% 0%; }
}

.entrance-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 32px;
    max-width: 960px;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeIn 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms forwards;
}

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

.entrance-label {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6878B0;
    margin-bottom: 28px;
}

.entrance-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(48px, 7vw, 96px);
    letter-spacing: 0.01em;
    color: #404050;
    line-height: 1.05;
    margin-bottom: 22px;
}

.entrance-dot {
    color: #C8808A;
    font-style: italic;
}

.entrance-tag {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(15px, 1.2vw, 19px);
    color: #404050;
    opacity: 0.78;
}

.entrance-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    width: 100%;
    height: 80px;
    z-index: 2;
}

.wave-path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: waveDraw 1600ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms forwards;
}

.wave-path.wave-rose { animation-delay: 800ms; }
.wave-path.wave-thin { animation-delay: 1100ms; }

@keyframes waveDraw {
    to { stroke-dashoffset: 0; }
}

/* Bokeh circles */
.bokeh {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    animation: bokehPulse 8s ease-in-out infinite, bokehFade 1500ms ease-out forwards;
}

@keyframes bokehFade {
    to { opacity: 1; }
}

@keyframes bokehPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.15); opacity: 1; }
}

.bokeh-1 { top: 12%; left: 8%; width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(200, 128, 138, 0.18) 0%, transparent 70%);
    animation-delay: 0s, 0s; }
.bokeh-2 { top: 22%; right: 10%; width: 90px; height: 90px;
    background: radial-gradient(circle, rgba(104, 120, 176, 0.18) 0%, transparent 70%);
    animation-delay: 1.2s, 200ms; }
.bokeh-3 { bottom: 25%; left: 18%; width: 110px; height: 110px;
    background: radial-gradient(circle, rgba(208, 208, 224, 0.45) 0%, transparent 70%);
    animation-delay: 2.4s, 400ms; }
.bokeh-4 { bottom: 18%; right: 22%; width: 70px; height: 70px;
    background: radial-gradient(circle, rgba(200, 128, 138, 0.20) 0%, transparent 70%);
    animation-delay: 3.6s, 600ms; }
.bokeh-5 { top: 50%; left: 4%; width: 60px; height: 60px;
    background: radial-gradient(circle, rgba(104, 120, 176, 0.20) 0%, transparent 70%);
    animation-delay: 0.6s, 800ms; }
.bokeh-6 { top: 60%; right: 6%; width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(208, 208, 224, 0.40) 0%, transparent 70%);
    animation-delay: 1.8s, 1000ms; }

.scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #404050;
    opacity: 0.5;
    z-index: 3;
    animation: cuePulse 2.4s ease-in-out infinite;
}

@keyframes cuePulse {
    0%, 100% { opacity: 0.35; transform: translate(-50%, 0); }
    50%      { opacity: 0.75; transform: translate(-50%, 6px); }
}

/* ============================================================
   TIMELINE SECTION
   ============================================================ */
.timeline-section {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #E8E8F0 0%, #DCDCE8 50%, #E8E8F0 100%);
    padding: 120px 0 160px;
    overflow: hidden;
}

.timeline-axis {
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, #404050 8%, #404050 92%, transparent 100%);
    transform: translateX(-0.5px) scaleY(0);
    transform-origin: top center;
    transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline-axis.is-drawn {
    transform: translateX(-0.5px) scaleY(1);
}

.timeline-intro {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 100px;
    padding: 0 24px;
}

.intro-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6878B0;
    margin-bottom: 14px;
}

.intro-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(24px, 2.6vw, 36px);
    color: #404050;
    letter-spacing: 0.01em;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.3;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.t-node {
    position: relative;
    width: 50%;
    padding: 0 60px;
    margin-bottom: 80px;
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.t-node.t-left {
    left: 0;
    transform: translateX(-30px);
    text-align: right;
}

.t-node.t-right {
    left: 50%;
    transform: translateX(30px);
    text-align: left;
}

.t-node.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Branching connector line from axis to card */
.t-node::before {
    content: '';
    position: absolute;
    top: 22px;
    height: 0.5px;
    width: 50px;
    background: #404050;
    opacity: 0.45;
}

.t-node.t-left::before { right: 8px; }
.t-node.t-right::before { left: 8px; }

/* Marker on the axis */
.t-marker {
    position: absolute;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E8E8F0;
    border: 1px solid #404050;
    box-shadow: 0 0 0 2px rgba(232, 232, 240, 1), 0 0 12px rgba(208, 208, 224, 0.6);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, background 320ms ease;
    z-index: 3;
}

.t-node.t-left .t-marker { right: -64px; }
.t-node.t-right .t-marker { left: -64px; }

.t-card {
    position: relative;
    background: linear-gradient(135deg, rgba(232, 232, 240, 0.92) 0%, rgba(208, 208, 224, 0.6) 100%);
    border: 1px solid rgba(64, 64, 80, 0.12);
    padding: 28px 32px 26px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 30px -12px rgba(64, 64, 80, 0.18);
    transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
    backdrop-filter: blur(2px);
}

.t-node.t-left .t-card { margin-left: auto; }
.t-node.t-right .t-card { margin-right: auto; }

.t-card:hover,
.t-node.is-hovered .t-card {
    border-color: rgba(200, 128, 138, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 36px -10px rgba(200, 128, 138, 0.25);
}

.t-node:hover .t-marker,
.t-node.is-hovered .t-marker {
    transform: scale(1.3);
    background: #C8808A;
    box-shadow: 0 0 0 2px rgba(232, 232, 240, 1), 0 0 18px rgba(200, 128, 138, 0.55);
}

.t-date {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: #6878B0;
    margin-bottom: 8px;
}

.t-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(22px, 2vw, 30px);
    color: #404050;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.t-summary {
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.85;
    color: #404050;
    opacity: 0.85;
    margin-bottom: 14px;
}

.t-toggle {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #6878B0;
    color: #6878B0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 2px 0 4px;
    cursor: pointer;
    transition: color 240ms ease, border-color 240ms ease, letter-spacing 240ms ease;
}

.t-toggle:hover {
    color: #C8808A;
    border-color: #C8808A;
    letter-spacing: 0.12em;
}

.t-detail {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 400ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 400ms ease, margin-top 400ms ease;
    margin-top: 0;
}

.t-detail p {
    font-size: clamp(14px, 0.95vw, 16px);
    color: #404050;
    opacity: 0.85;
    margin-bottom: 14px;
}

.t-meta {
    list-style: none;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 0.5px solid rgba(64, 64, 80, 0.18);
    padding-top: 12px;
}

.t-node.t-left .t-meta { justify-content: flex-end; }

.t-meta li {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6878B0;
}

.t-card.is-open .t-detail {
    max-height: 480px;
    opacity: 1;
    margin-top: 8px;
}

/* Wave interludes between nodes */
.wave-interlude {
    position: relative;
    width: 100%;
    height: 60px;
    margin: 20px 0 60px;
    overflow: hidden;
}

.wave-interlude svg {
    width: 200%;
    height: 100%;
    display: block;
    animation: waveDrift 18s linear infinite;
}

@keyframes waveDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.wave-interlude.is-near svg {
    animation-duration: 6s;
}

/* ============================================================
   REFLECTION POOL (footer)
   ============================================================ */
.reflection-pool {
    position: relative;
    width: 100%;
    min-height: 60vh;
    background: linear-gradient(180deg, #C0C0D0 0%, #6878B0 45%, #404050 80%, #282838 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 100px;
}

.pool-bokeh {
    position: absolute;
    border-radius: 50%;
    filter: blur(22px);
    pointer-events: none;
    opacity: 0.6;
    animation: bokehPulse 10s ease-in-out infinite;
}

.pool-bokeh-1 {
    top: 15%; left: 12%;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(200, 128, 138, 0.32) 0%, transparent 70%);
}

.pool-bokeh-2 {
    bottom: 20%; right: 10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(208, 208, 224, 0.22) 0%, transparent 70%);
    animation-delay: 2s;
}

.pool-bokeh-3 {
    top: 50%; left: 50%;
    width: 120px; height: 120px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(104, 120, 176, 0.30) 0%, transparent 70%);
    animation-delay: 4s;
}

.pool-ripple {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
    animation: rippleDrift 24s linear infinite;
}

@keyframes rippleDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-3%); }
}

.pool-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
}

.pool-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E8E8F0;
    border: 1px solid #D0D0E0;
    box-shadow: 0 0 24px rgba(232, 232, 240, 0.6);
    margin-bottom: 32px;
}

.pool-quote {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.6;
    color: #E8E8F0;
    margin-bottom: 32px;
    letter-spacing: 0.01em;
}

.pool-sign {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #D0D0E0;
    opacity: 0.75;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .timeline-axis { left: 24px; }

    .t-node,
    .t-node.t-left,
    .t-node.t-right {
        width: 100%;
        left: 0;
        padding: 0 0 0 56px;
        text-align: left;
        transform: translateX(-20px);
    }

    .t-node.is-visible { transform: translateX(0); }

    .t-node::before { width: 28px; }
    .t-node.t-left::before { left: 24px; right: auto; }
    .t-node.t-right::before { left: 24px; }

    .t-node.t-left .t-marker { left: 20px; right: auto; }
    .t-node.t-right .t-marker { left: 20px; }

    .t-node.t-left .t-card,
    .t-node.t-right .t-card {
        margin-left: 0;
        margin-right: 0;
    }

    .t-node.t-left .t-meta { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .entrance-title { font-size: clamp(40px, 11vw, 64px); }
    .timeline-section { padding: 80px 0 100px; }
    .t-card { padding: 22px 24px; }
}