/* gur.al - Contemplative Pop-Art Chrome */

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

:root{
    --platinum-mist:#E8E8EC;
    --deep-graphite:#2A2A2E;
    --chrome-night:#1A1A1E;
    --cool-steel:#B0B0B8;
    --ink-black:#1A1A1A;
    --smoke-gray:#6B6B73;
    --off-white-chrome:#F0F0F4;
    --rose-chrome:#E8B4C8;
    --aged-gilt:#D4C896;
    --mirror-silver:#D8D8E0;
    --polished-steel:#A0A0AA;
    --burnished-lead:#707078;
    --pop-outline:#0A0A0A;
}

html{scroll-behavior:smooth}

body{
    background:var(--platinum-mist);
    color:var(--ink-black);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    line-height:1.65;
    letter-spacing:0.015em;
    overflow-x:hidden;
}

/* Raked gravel lines */
body::after{
    content:'';
    position:fixed;inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(
        0deg,
        transparent,transparent 11px,
        rgba(192,192,192,0.08) 11px,rgba(192,192,192,0.08) 12px
    );
    z-index:0;
}

.panel{
    min-height:100vh;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.panel-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(12px,2vw,24px);
    width:100%;
    max-width:1400px;
    padding:0 clamp(24px,4vw,60px);
}

/* Panel 1: Chrome Garden */
.panel-1{
    background:var(--cool-steel);
    min-height:100vh;
}

.hero-domain{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(5rem,14vw,12rem);
    line-height:0.95;
    letter-spacing:-0.02em;
    color:var(--ink-black);
    grid-column:1/8;
    align-self:start;
    margin-top:15vh;
    margin-left:-5vw;
}

.chrome-mandala{
    grid-column:6/13;
    grid-row:1;
    align-self:end;
    margin-bottom:10vh;
    width:100%;
    max-width:400px;
    justify-self:end;
}

.mandala-svg{
    width:100%;
    height:auto;
    animation:slowRotate 30s linear infinite;
}

@keyframes slowRotate{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

.petal{
    transform-origin:200px 200px;
    transition:d 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Panel 2: Data Bloom */
.panel-2{
    background:var(--platinum-mist);
    min-height:120vh;
}

.data-bloom-layout{
    align-items:center;
}

.bloom-visual{
    grid-column:1/8;
}

.bloom-svg{
    width:100%;
    max-width:400px;
}

.data-petal{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    transition:stroke-dashoffset 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.data-petal.morphed{
    stroke-dashoffset:0;
}

.bloom-bubbles{
    grid-column:8/13;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.speech-bubble{
    background:linear-gradient(135deg,var(--mirror-silver) 0%,var(--polished-steel) 35%,var(--burnished-lead) 65%,var(--polished-steel) 80%,var(--mirror-silver) 100%);
    border:3px solid var(--pop-outline);
    border-radius:12px;
    padding:20px 24px;
    position:relative;
    transition:border-width 0.2s,border-color 0.2s;
}

.speech-bubble::after{
    content:'';
    position:absolute;
    left:-12px;top:50%;
    width:0;height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-right:12px solid var(--pop-outline);
    transform:translateY(-50%);
}

.speech-bubble:hover{
    border-width:5px;
    border-color:var(--rose-chrome);
}

.speech-bubble p{
    font-family:'IBM Plex Sans',sans-serif;
    font-size:0.95rem;
    color:var(--ink-black);
    margin:0;
}

.bubble-annotation{
    font-family:'Caveat',cursive;
    font-size:clamp(0.85rem,1.1vw,1rem);
    color:var(--smoke-gray);
    display:block;
    margin-top:8px;
    letter-spacing:0.02em;
}

.bubble-top{align-self:flex-start}
.bubble-mid{align-self:center}
.bubble-bot{align-self:flex-end}

/* Panel 3: Dot Field */
.panel-3{
    background:var(--deep-graphite);
    min-height:100vh;
    background-image:radial-gradient(circle 12px,#C0C0C0 100%,transparent 100%);
    background-size:32px 32px;
    background-position:8px 8px;
}

.dot-field{
    width:100%;
    max-width:1200px;
    padding:0 clamp(24px,4vw,60px);
    position:relative;
    min-height:80vh;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-around;
    gap:40px;
}

.dot-card{
    background:var(--deep-graphite);
    border:2px solid var(--polished-steel);
    padding:24px 32px;
    max-width:280px;
    position:relative;
}

.dot-card::before{
    content:'';
    position:absolute;
    inset:-20px;
    background:radial-gradient(circle,var(--rose-chrome) 0%,transparent 70%);
    opacity:0.15;
    z-index:-1;
    border-radius:50%;
}

.dot-text{
    font-family:'Caveat',cursive;
    font-size:clamp(0.95rem,1.3vw,1.15rem);
    color:var(--off-white-chrome);
    line-height:1.5;
    letter-spacing:0.02em;
}

/* Panel 4: Still Garden */
.panel-4{
    background:var(--platinum-mist);
    min-height:100vh;
}

.still-garden{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    position:relative;
    padding:0 clamp(24px,4vw,60px);
}

.chrysanthemum-svg{
    width:300px;
    height:300px;
    position:absolute;
    left:61.8%;
    top:38.2%;
    transform:translate(-50%,-50%);
}

.garden-text{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--smoke-gray);
    max-width:28ch;
    position:absolute;
    left:10%;
    bottom:25%;
}

/* Panel 5: Reflection */
.panel-5{
    background:var(--chrome-night);
    min-height:100vh;
}

.reflection-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:40px;
    text-align:center;
    padding:0 40px;
}

.reflection-text{
    font-family:'IBM Plex Sans',sans-serif;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--smoke-gray);
    max-width:40ch;
}

.mini-bloom-svg{
    width:120px;height:120px;
    animation:slowRotate 30s linear infinite reverse;
}

.domain-reflected{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    align-self:flex-end;
    margin-right:10vw;
}

.reflected-text{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,6rem);
    color:var(--off-white-chrome);
    letter-spacing:-0.02em;
    line-height:1;
}

.reflected-mirror{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,6rem);
    color:var(--off-white-chrome);
    letter-spacing:-0.02em;
    line-height:1;
    transform:scaleY(-1);
    opacity:0.15;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0.4),transparent);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.4),transparent);
}

/* Chrome sphere accents */
.chrome-sphere{
    width:14px;height:14px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,var(--off-white-chrome),var(--polished-steel),var(--burnished-lead));
    display:inline-block;
}

/* Responsive */
@media(max-width:768px){
    .panel-grid{grid-template-columns:1fr}
    .hero-domain{grid-column:1;margin-left:0;font-size:clamp(3rem,12vw,6rem)}
    .chrome-mandala{grid-column:1;justify-self:center;margin-bottom:40px}
    .bloom-visual{grid-column:1}
    .bloom-bubbles{grid-column:1}
    .speech-bubble::after{display:none}
    .dot-field{flex-direction:column}
    .chrysanthemum-svg{position:relative;left:auto;top:auto;transform:none}
    .garden-text{position:relative;left:auto;bottom:auto;margin-top:30px}
    .domain-reflected{align-self:center;margin-right:0}
}