/* =============================================================================
   ATELIER.CSS — page-atelier.php için özel stiller
   main.css CSS değişkenlerine bağımlı — yeni token tanımlanmaz.
   Yalnızca is_page('atelier') koşulunda yüklenir.

   Bölüm sırası:
     1.  Sayfa wrapper
     2.  Hero bölümü
     3.  Atelier intro — kısa hikâye
     4.  The Maker bölümü
     5.  Radial Orbital Timeline — masaüstü (is-radial aktifken)
     6.  Radial step durumları
     7.  Radial detail panel
     8.  Mobile timeline — dikey liste (is-radial pasifken)
     9.  Materials & Methods bölümü
    10.  Atelier CTA
    11.  Responsive
   ============================================================================= */


/* =============================================================================
   1. SAYFA WRAPPER
   ============================================================================= */

.page-atelier {
    padding-top:    calc( var(--header-height) + var(--space-16) );
    padding-bottom: var(--space-32);
}


/* =============================================================================
   2. ATELIER HERO
   ============================================================================= */

.atelier-hero {
    position:      relative;
    width:         100%;
    max-height:    70vh;
    overflow:      hidden;
    margin-bottom: var(--space-20);
}

.atelier-hero__image-wrap {
    width:  100%;
    height: 100%;
}

.atelier-hero__image {
    width:           100%;
    max-height:      70vh;
    object-fit:      cover;
    object-position: center;
    display:         block;
    animation:       atelier-emerge 3.8s ease-in-out forwards;
}

@keyframes atelier-emerge {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Header altı degrade — görsel pat diye başlamasın */
.atelier-hero::before {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    right:          0;
    height:         160px;
    background:     linear-gradient( to bottom, rgba(10,9,8,0.8) 0%, transparent 100% );
    z-index:        1;
    pointer-events: none;
}

/* Hover / scroll darkening overlay */
.atelier-hero::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.2);
    transition:     background 0.55s ease;
    pointer-events: none;
    z-index:        1;
}

.atelier-hero:hover::after {
    background: rgba(0, 0, 0, 0);
}

.atelier-hero__gradient {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     220px;
    background: linear-gradient( to top, var(--color-black), transparent );
    pointer-events: none;
}


/* =============================================================================
   3. ATELIER INTRO
   ============================================================================= */

.atelier-intro {
    padding: var(--space-12) 0 var(--space-16);
}

.atelier-intro__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-16);
    align-items:           start;
}

.atelier-intro__label {
    /* section-label class'ı kullanılacak */
}

.atelier-intro__heading {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-3xl), 4vw, var(--text-5xl) );
    font-weight:    var(--weight-light);
    letter-spacing: -0.025em;
    line-height:    1.05;
    color:          var(--color-cream);
}

.atelier-intro__body {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.atelier-intro__body p {
    font-size:   var(--text-lg);
    line-height: 1.75;
    color:       rgba(239, 230, 215, 0.75);
}


/* =============================================================================
   4. THE MAKER BÖLÜMܠ
   ============================================================================= */

.atelier-maker {
    padding:        var(--space-16) 0;
    border-top:     1px solid rgba(58, 58, 58, 0.4);
    border-bottom:  1px solid rgba(58, 58, 58, 0.4);
    margin-bottom:  var(--space-20);
}

.atelier-maker__inner {
    display:               grid;
    grid-template-columns: 280px 1fr;
    gap:                   var(--space-16);
    align-items:           start;
}

/* Portre — opsiyonel */
.atelier-maker__portrait-wrap {
    aspect-ratio:  3 / 4;
    overflow:      hidden;
    border-radius: var(--radius-sm);
    background:    rgba(20, 19, 18, 0.8);
}

.atelier-maker__portrait {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
}

.atelier-maker__bio {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.atelier-maker__name {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-2xl), 3vw, var(--text-4xl) );
    font-weight:    var(--weight-light);
    letter-spacing: -0.02em;
    color:          var(--color-cream);
}

.atelier-maker__role {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-gold);
    max-width:      none;
}

.atelier-maker__text {
    font-size:   var(--text-base);
    line-height: 1.8;
    color:       rgba(239, 230, 215, 0.7);
}


/* =============================================================================
   5. RADIAL ORBİTAL TİMELİNE — Masaüstü (is-radial aktifken)
   JS, 'is-radial' class'ını container'a ekler ve step'leri konumlandırır.
   ============================================================================= */

.radial-timeline-section {
    position: relative;
    overflow: hidden;
    padding: var(--space-20) 0;
}

.radial-timeline-section__header {
    text-align:    center;
    margin-bottom: var(--space-24);
}

.radial-timeline-wrapper {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-12);
}

/* Radial container — is-radial aktifken kare, step'ler absolute */
.radial-timeline {
    position: relative;
    width:    100%;
    max-width: 540px;
    /* Yükseklik JS tarafından container.style.height ile set edilir */
}

/* Arka plan — iki katman (front/back) crossfade ile pürüzsüz geçiş */
.radial-timeline__bg {
    position:           absolute;
    inset:              0;
    z-index:            -1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, black 44%, black 89%, transparent 100%);
    mask-image:         linear-gradient(to bottom, transparent 0%, transparent 22%, black 44%, black 89%, transparent 100%);
    pointer-events:     none;
}

/* Her iki katman — JS dönüşümlü kullanır, biri solar diğeri belirir */
.radial-timeline__bg-layer {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    opacity:             0;
    transition:          opacity 0.4s ease;
}

/* SVG overlay — JS tarafından doldurulur (orbit çizgisi + bağlantı çizgileri) */
.radial-timeline__svg {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    z-index:        1;
    pointer-events: none;
    overflow:       visible;
}

/* Merkez element */
.radial-timeline__center {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         2;
    pointer-events:  none;
}

.radial-timeline__center-ring {
    display:       block;
    width:         48px;
    height:        48px;
    border-radius: 50%;
    border:        1px solid var(--color-gold);
    position:      relative;
}

/* İç nokta */
.radial-timeline__center-ring::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--color-gold);
    box-shadow:    0 0 12px rgba(201, 166, 107, 0.6);
    transition:    opacity 0.35s ease;
}

/* Numara görününce iç nokta söner */
.radial-timeline__center.has-number .radial-timeline__center-ring::after {
    opacity: 0;
}

/* Merkez çember içi adım numarası — editorial bold, çembere sığdırılmış */
.radial-timeline__center-number {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 700;
    font-size:   1.25rem;
    line-height: 1;
    color:       var(--color-gold);
    opacity:     0;
    transition:  opacity 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
}

.radial-timeline__center-number.is-visible {
    opacity: 1;
}


/* =============================================================================
   6. RADİAL STEP DURUMLARI
   is-radial aktif olmadığında step'ler dikey liste olarak görünür.
   is-radial aktifken JS transform ile konumlandırır.
   ============================================================================= */

.radial-step {
    /* Reset button styles */
    appearance:  none;
    background:  none;
    border:      none;
    font:        inherit;
    cursor:      pointer;
    text-align:  center;
    color:       inherit;

    /* Default (mobile) — liste görünümü */
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    padding:     var(--space-5) 0;
    border-bottom: 1px solid rgba(58, 58, 58, 0.35);
    width:       100%;
}

/* is-radial aktifken: JS konumlandırır, flex yerine block */
.radial-timeline.is-radial .radial-step {
    position:   absolute;
    top:        50%;
    left:       50%;
    /* JS: transform: translate(calc(-50% + Xpx), calc(-50% + Ypx)) */
    display:    block;
    width:      110px;
    padding:    0;
    border:     none;
    z-index:    3;
    transition: none; /* JS'e bırak */
}

/* Step nokta */
.radial-step__dot {
    display:       block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        1px solid var(--color-smoke);
    background:    var(--color-black);
    flex-shrink:   0;
    margin-top:    3px;
    transition:    border-color var(--transition-fast),
                   background   var(--transition-fast),
                   box-shadow   var(--transition-fast);
}

/* is-radial'de dot merkeze taşınır */
.radial-timeline.is-radial .radial-step__dot {
    margin:  0 auto var(--space-2);
}

.radial-step__number {
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-muted);
    display:        block;
    transition:     color var(--transition-fast);
    max-width:      none;
}

.radial-step__title {
    font-family:    var(--font-display);
    font-size:      var(--text-base);
    font-weight:    var(--weight-light);
    color:          var(--color-cream);
    display:        block;
    transition:     color var(--transition-fast);
    max-width:      none;
    line-height:    1.2;
}

/* Hover durumu */
.radial-step:hover .radial-step__dot {
    border-color: var(--color-gold);
    background:   rgba(201, 166, 107, 0.15);
}

.radial-step:hover .radial-step__number,
.radial-step:hover .radial-step__title {
    color: var(--color-gold);
}

/* Active durumu */
.radial-step.is-active .radial-step__dot {
    background:   var(--color-gold);
    border-color: var(--color-gold);
    box-shadow:   0 0 10px rgba(201, 166, 107, 0.5);
    transition:   opacity 0.3s ease;
}

/* Aktif adımda numara + dot gizlenir — merkez çemberde gösteriliyor */
.radial-timeline.is-radial .radial-step.is-active .radial-step__number,
.radial-timeline.is-radial .radial-step.is-active .radial-step__dot {
    opacity:    0;
    transition: opacity 0.3s ease;
}

.radial-step.is-active .radial-step__title {
    color: var(--color-cream);
}

/* Focus görünümü */
.radial-step:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 4px;
    border-radius:  var(--radius-sm);
}


/* =============================================================================
   7. RADİAL DETAIL PANELİ
   Aktif step'in açıklaması — timeline'ın altında görünür.
   is-visible class'ı JS tarafından eklenir.
   ============================================================================= */

.radial-timeline__detail {
    max-width:      480px;
    width:          100%;
    text-align:     center;
    opacity:        0;
    transition:     opacity var(--transition-base);
    pointer-events: none;
    min-height:     220px; /* Sabit yükseklik — içerik değişince layout kaymasın */
}

.radial-timeline__detail.is-visible {
    opacity:        1;
    pointer-events: auto;
}

@keyframes detail-item-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.radial-detail__number {
    font-size:      var(--text-xs);
    letter-spacing: 0.18em;
    color:          var(--color-gold);
    display:        block;
    margin-bottom:  var(--space-3);
    max-width:      none;
    animation:      detail-item-in 0.5s ease forwards;
}

.radial-detail__title {
    font-family:    var(--font-display);
    font-size:      var(--text-2xl);
    font-weight:    var(--weight-light);
    letter-spacing: -0.015em;
    color:          var(--color-cream);
    margin-bottom:  var(--space-4);
    animation:      detail-item-in 0.5s ease 0.08s forwards;
    opacity:        0;
}

.radial-detail__desc {
    font-size:   var(--text-base);
    line-height: 1.75;
    color:       rgba(239, 230, 215, 0.7);
    animation:   detail-item-in 0.5s ease 0.16s forwards;
    opacity:     0;
    max-width:   42ch;
    margin-inline: auto;
}


/* =============================================================================
   8. MOBİL TİMELİNE — dikey liste (is-radial yok = varsayılan görünüm)
   ============================================================================= */

/* Mobile'da detail panel liste içinde görünsün */
.radial-step .radial-step__detail-mobile {
    display:     none;
    padding-top: var(--space-3);
    grid-column: 2; /* dot'un yanında değil, altında */
}

.radial-step.is-active .radial-step__detail-mobile {
    display: block;
}

.radial-step__detail-mobile p {
    font-size:   var(--text-sm);
    line-height: 1.7;
    color:       rgba(239, 230, 215, 0.65);
    max-width:   none;
}

/* Mobile'da wrapper flex column ve detail panel görsel olarak gizlenir.
   display:none yerine visually-hidden: aria-live çalışmaya devam eder,
   ekran okuyucular step açıklamalarını duyurabilir. */
@media (max-width: 767px) {
    .radial-timeline__detail {
        position:   absolute;
        width:      1px;
        height:     1px;
        padding:    0;
        margin:     -1px;
        overflow:   hidden;
        clip:       rect(0, 0, 0, 0);
        white-space: nowrap;
        border:     0;
    }
    .radial-timeline__detail.is-visible {
        opacity:   1;
        transform: none;
    }

    /* Step liste görünümü — sol: dot, sağ: number + title + desc (active'de) */
    .radial-step {
        display:     grid;
        grid-template-columns: 24px 1fr;
        gap:         var(--space-3);
        align-items: start;
    }

    .radial-step__dot {
        margin-top: 3px;
    }

    .radial-step .radial-step__detail-mobile {
        display: none; /* grid-column: 2 zaten ayarlandı */
        grid-column: 2;
    }

    .radial-step.is-active .radial-step__detail-mobile {
        display: block;
    }
}


/* =============================================================================
   9. MATERIALS & METHODS
   ============================================================================= */

.atelier-materials {
    padding:       var(--space-20) 0;
    border-top:    1px solid rgba(58, 58, 58, 0.4);
    margin-top:    var(--space-8);
}

.materials-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-4);
    margin-top:            var(--space-10);
}

.material-item {
    border:        1px solid rgba(58, 58, 58, 0.35);
    border-radius: var(--radius-sm);
    padding:       var(--space-6);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-3);
    transition:    border-color var(--transition-fast);
}

.material-item:hover {
    border-color: rgba(201, 166, 107, 0.3);
    background:   rgba(201, 166, 107, 0.05);
}

.material-item__label {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-gold);
    text-transform: uppercase;
    max-width:      none;
}

.material-item__value {
    font-family:    var(--font-display);
    font-size:      var(--text-lg);
    font-weight:    var(--weight-light);
    color:          var(--color-cream);
    line-height:    1.2;
}

.material-item__desc {
    font-size:   var(--text-sm);
    color:       rgba(239, 230, 215, 0.55);
    line-height: 1.6;
    max-width:   none;
}

/* Mini-carousel — Steel Grade */
.material-item--carousel {
    position: relative;
}

.material-carousel {
    display:               grid;
    grid-template-rows:    auto;
    grid-template-columns: 1fr;
    flex:                  1;
}

.material-carousel__slide {
    grid-row:       1;
    grid-column:    1;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.35s ease;
}

.material-carousel__slide.is-active {
    opacity:        1;
    pointer-events: auto;
    z-index:        1;
}

.material-carousel__nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      var(--space-4);
}

.material-carousel__dots {
    display: flex;
    gap:     var(--space-2);
}

.material-carousel__dot {
    appearance:    none;
    background:    rgba(201, 166, 107, 0.25);
    border:        none;
    border-radius: 50%;
    cursor:        pointer;
    width:         7px;
    height:        7px;
    padding:       0;
    transition:    background var(--transition-fast), transform var(--transition-fast);
}

.material-carousel__dot.is-active {
    background: var(--color-gold);
    transform:  scale(1.25);
}

.material-carousel__dot:hover:not(.is-active) {
    background: rgba(201, 166, 107, 0.55);
}

.material-carousel__prev,
.material-carousel__next {
    appearance:  none;
    background:  none;
    border:      none;
    color:       rgba(201, 166, 107, 0.55);
    cursor:      pointer;
    font-size:   1.1rem;
    line-height: 1;
    padding:     0 2px;
    transition:  color var(--transition-fast);
}

.material-carousel__prev:hover,
.material-carousel__next:hover {
    color: var(--color-gold);
}


/* =============================================================================
   10. ATELİER CTA
   ============================================================================= */

.atelier-cta {
    padding:    var(--space-24) 0;
    text-align: center;
    border-top: 1px solid rgba(58, 58, 58, 0.3);
    margin-top: var(--space-8);
}

.atelier-cta__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-6);
    max-width:      480px;
    margin-inline:  auto;
}

.atelier-cta__title {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-2xl), 3.5vw, var(--text-4xl) );
    font-weight:    var(--weight-light);
    letter-spacing: -0.02em;
    color:          var(--color-cream);
}

.atelier-cta__desc {
    font-size:   var(--text-base);
    color:       rgba(239, 230, 215, 0.6);
    max-width:   40ch;
    line-height: 1.7;
}


/* =============================================================================
   11. RESPONSİVE
   ============================================================================= */

@media (max-width: 1023px) {
    /* Atelier intro üst üste */
    .atelier-intro__inner {
        grid-template-columns: 1fr;
        gap:                   var(--space-8);
    }

    /* Maker üst üste */
    .atelier-maker__inner {
        grid-template-columns: 1fr;
    }

    .atelier-maker__portrait-wrap {
        max-width: 240px;
    }

    /* Materials 2 sütun */
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    /* Materials tek sütun */
    .materials-grid {
        grid-template-columns: 1fr;
    }

    /* Radial timeline: mobilde gizlenir — process-scroll devralır */
    .radial-timeline-section {
        display: none;
    }
}

/* Process-scroll masaüstünde gizlenir */
@media (min-width: 768px) {
    .process-scroll {
        display: none;
    }
}


/* =============================================================================
   4B. MOBİL SCROLL PROCESS — Apple-style tam sayfa adımlar
   ============================================================================= */

.process-scroll {
    position: relative;
}

/* Yapışkan ilerleme çubuğu — en altta */
.process-scroll__bar {
    position:   sticky;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    90;
    height:     2px;
    background: rgba(58, 58, 58, 0.35);
    overflow:   hidden;
}

.process-scroll__bar-fill {
    height:     100%;
    width:      0%;
    background: var(--color-gold, #C9A66B);
    transition: width 0.12s linear;
    box-shadow: 0 0 8px rgba(201, 166, 107, 0.55);
}

/* Section giriş başlığı */
.process-scroll__intro {
    padding:    var(--space-16) 0 var(--space-14);
    border-top: 1px solid rgba(58, 58, 58, 0.4);
    margin-top: var(--space-12);
}

/* Adım — doğal yükseklik, görsel + metin akışı */
.process-scroll__step {
    padding-bottom: var(--space-16);
    border-top:     1px solid rgba(58, 58, 58, 0.18);
}

/* Görsel sarıcı — tam genişlik, yan taşmayı kırp */
.process-scroll__img-wrap {
    overflow: hidden;
    width:    100%;
}

.process-scroll__img {
    width:           100%;
    aspect-ratio:    4 / 3;
    object-fit:      cover;
    object-position: center;
    display:         block;
    opacity:         0;
    transition:      opacity   1.1s ease,
                     transform 1.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Directional entrance — set by PHP modifier class */
.process-scroll__step--from-right .process-scroll__img {
    transform: translateX(80px) scale(1.03);
}

.process-scroll__step--from-left .process-scroll__img {
    transform: translateX(-80px) scale(1.03);
}

/* Metin alanı — görsel altında, doğal akış */
.process-scroll__body {
    padding-top:    var(--space-7);
    padding-inline: var(--space-5);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

/* XX — 07 sayacı */
.process-scroll__num {
    display:        block;
    font-size:      var(--text-xs);
    letter-spacing: 0.2em;
    color:          var(--color-gold);
    opacity:        0;
    transform:      translateY(10px);
    transition:     opacity   0.4s ease 0.08s,
                    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.process-scroll__title {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-2xl), 9vw, var(--text-3xl));
    font-weight:    var(--weight-light);
    letter-spacing: -0.02em;
    line-height:    1.08;
    color:          var(--color-cream);
    margin:         0;
}

.process-scroll__desc {
    font-size:   var(--text-sm);
    line-height: 1.75;
    color:       rgba(239, 230, 215, 0.58);
    margin:      0;
}

/* Kelime span — Apple blur+rise */
.ps-word {
    display:        inline-block;
    opacity:        0;
    filter:         blur(8px);
    transform:      translateY(16px);
    transition:     opacity   0.52s ease,
                    filter    0.52s ease,
                    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
    will-change:    filter, transform, opacity;
}

/* is-in aktifken her şeyi aç */
.process-scroll__step.is-in .process-scroll__img {
    opacity:   1;
    transform: none;
}

.process-scroll__step.is-in .process-scroll__num {
    opacity:   1;
    transform: none;
}


/* =============================================================================
   LIGHT MODE — Hardcoded cream/dark rgba overrides
   rgba(239, 230, 215, ...) ivory zeminde görünmez; espresso tonları ile değiştirilir.
   rgba(58, 58, 58, ...) borders görünmez; espresso borders ile değiştirilir.
   ============================================================================= */

[data-theme="light"] .atelier-intro__body p {
    color: rgba(28, 21, 16, 0.7);
}

[data-theme="light"] .atelier-maker {
    border-top-color:    rgba(28, 21, 16, 0.12);
    border-bottom-color: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .atelier-maker__text {
    color: rgba(28, 21, 16, 0.7);
}

[data-theme="light"] .radial-detail__desc {
    color: rgba(28, 21, 16, 0.7);
}

[data-theme="light"] .radial-step__detail-mobile p {
    color: rgba(28, 21, 16, 0.65);
}

[data-theme="light"] .atelier-materials {
    border-top-color: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .material-item {
    border-color: rgba(28, 21, 16, 0.15);
}

[data-theme="light"] .material-item:hover {
    border-color: rgba(154, 106, 48, 0.3);
}

[data-theme="light"] .material-item__desc {
    color: rgba(28, 21, 16, 0.55);
}

[data-theme="light"] .process-scroll__bar {
    background: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .process-scroll__intro {
    border-top-color: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .process-scroll__step {
    border-top-color: rgba(28, 21, 16, 0.1);
}

[data-theme="light"] .process-scroll__desc {
    color: rgba(28, 21, 16, 0.58);
}

[data-theme="light"] .atelier-cta {
    border-top-color: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .atelier-cta__desc {
    color: rgba(28, 21, 16, 0.6);
}

.process-scroll__step.is-in .ps-word {
    opacity:   1;
    filter:    blur(0);
    transform: none;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ps-word,
    .process-scroll__img,
    .process-scroll__num {
        transition: none !important;
        animation:  none !important;
        opacity:    1 !important;
        filter:     none !important;
        transform:  none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .radial-timeline__bg-layer { transition: none; }
    .atelier-hero__image       { animation: none; }
    .atelier-hero::after       { transition: none; }
    .radial-detail__number,
    .radial-detail__title,
    .radial-detail__desc  { animation: none; opacity: 1; transform: none; }
}