/*
Theme Name: Atelier Noisette
Theme URI: https://emieldewulf.be
Author: Emiel Dewulf
Author URI: https://emieldewulf.be
Description: Thema voor Atelier Noisette
Version: 1.0
Text Domain: base-theme
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
*/

body {
    font-family: 'Inter', sans-serif;
}

section[id] {
    scroll-margin-top: 120px;
}

/* ============================================
   BTN--PRIMARY
   ============================================ */

:root {
    --btn-primary-color:           var(--color-on-primary);
    --btn-primary-color-background: var(--color-primary);
    --btn-primary-color-focus:     var(--color-on-primary);
    --btn-primary-border-radius:   4px;
    --btn-primary-padding:         16px 64px;
    --btn-primary-translate-y:     1.25em;
    --btn-primary-focus-inset:     -0.125em;
    --btn-primary-click-scale:     0.955 0.925;
    --btn-primary-ease-hover:      cubic-bezier(0.675, 0.15, 0.1, 1);
    --btn-primary-ease-click:      cubic-bezier(0.4, 0, 0.2, 1);
    --btn-primary-ease-focus:      cubic-bezier(0.32, 0.72, 0, 1);
}

.btn--primary {
    color: var(--btn-primary-color);
    user-select: none;
    -webkit-user-select: none;
    background-color: transparent;
    outline-style: none;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    display: inline-grid;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: scale 0.15s var(--btn-primary-ease-click);
    width:fit-content;
}

.btn--primary::after {
    content: '';
    display: block;
    position: absolute;
    inset: var(--btn-primary-focus-inset);
    border-radius: var(--btn-primary-border-radius);
    transition: box-shadow 0.3s var(--btn-primary-ease-focus);
    pointer-events: none;
    z-index: 1;
}

.btn--primary:is(:focus-visible)::after {
    box-shadow: 0 0 0 0.125em var(--btn-primary-color-focus);
}

.btn--primary:active {
    scale: var(--btn-primary-click-scale);
}

.btn--primary__inner {
    pointer-events: none;
    border-radius: var(--btn-primary-border-radius);
    z-index: 1;
    padding: var(--btn-primary-padding);
    grid-area: 1 / 1;
    display: grid;
}

.btn--primary__text {
    perspective: 10em;
    transform-style: preserve-3d;
    grid-area: 1 / 1;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn--primary__text .btn--primary__split-char {
    --base-delay: 0.05s;
    --max-extra: 2.9s;
    --t: calc(var(--index) / max(var(--max-index), 1));
    --curve: sin(calc(var(--t) * 1.5deg));
    --delay: calc(var(--base-delay) + (var(--curve) * var(--max-extra)));
    --rot-t: calc(var(--index) / max(var(--max-index), 1));
    --rot-curve: sin(calc(var(--rot-t) * 30deg));
    --rot-sign: clamp(-1, var(--signed-index), 1);
    --rot-max: 36deg;
    display: inline-block;
}

.btn--primary__text.is--default .btn--primary__split-char {
    transition: transform 0.325s var(--btn-primary-ease-hover), translate 0.425s var(--btn-primary-ease-hover), rotate 0.45s var(--btn-primary-ease-hover), opacity 0.15s ease-out;
}

.btn--primary__text.is--hover .btn--primary__split-char {
    transition: transform 0.35s var(--btn-primary-ease-hover), translate 0.35s var(--btn-primary-ease-hover), rotate 0.35s var(--btn-primary-ease-hover), opacity 0.15s 0.1s ease-out;
    rotate: 1 0 0 -72deg;
    transform: rotateZ(calc(var(--rot-sign) * var(--rot-curve) * var(--rot-max) * -1)) scale(0.65);
    translate: calc(var(--signed-index) * 0.125em) calc(var(--btn-primary-translate-y) * 1) 0;
    opacity: 0;
}

.btn--primary__bg {
    background-color: var(--btn-primary-color-background);
    border-radius: var(--btn-primary-border-radius);
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .btn--primary__text .btn--primary__split-char {
        will-change: transform, translate, rotate, opacity;
    }

    .btn--primary:is(:hover, :focus-visible) .btn--primary__text.is--default .btn--primary__split-char,
    [data-hover]:is(:hover, :focus-visible) .btn--primary .btn--primary__text.is--default .btn--primary__split-char {
        translate: calc(var(--signed-index) * 0.125em) calc(var(--btn-primary-translate-y) * -1) 0;
        rotate: 1 0 0 72deg;
        transform: rotateZ(calc(var(--rot-sign) * var(--rot-curve) * var(--rot-max) * -1)) scale(0.65);
        opacity: 0;
        transition: transform 0.35s var(--delay) var(--btn-primary-ease-hover), translate 0.35s var(--delay) var(--btn-primary-ease-hover), rotate 0.35s var(--delay) var(--btn-primary-ease-hover), opacity 0.15s calc(var(--delay) + 0.1s) ease-out;
    }

    .btn--primary:is(:hover, :focus-visible) .btn--primary__text.is--hover .btn--primary__split-char,
    [data-hover]:is(:hover, :focus-visible) .btn--primary .btn--primary__text.is--hover .btn--primary__split-char {
        translate: 0 0 0;
        rotate: 1 0 0 0deg;
        transform: rotateZ(0deg) scale(1);
        opacity: 1;
        transition: transform 0.325s calc(var(--delay) + 0.05s) var(--btn-primary-ease-hover), translate 0.425s calc(var(--delay) + 0.05s) var(--btn-primary-ease-hover), rotate 0.45s calc(var(--delay) + 0.05s) var(--btn-primary-ease-hover), opacity 0.15s calc(var(--delay) + 0.075s) ease-out;
    }
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    text-decoration: none;
    cursor: pointer;
}

.scroll-indicator__line {
    width: 1px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.scroll-indicator__pulse {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--color-primary), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%   { top: -100%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.scroll-indicator__label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ============================================
   BTN--SECONDARY
   ============================================ */

:root {
    --btn-secondary-color:            var(--color-primary);
    --btn-secondary-color-background: var(--color-white);
    --btn-secondary-color-focus:      var(--color-primary);
    --btn-secondary-border-radius:    4px;
    --btn-secondary-padding:          16px 64px;
    --btn-secondary-translate-y:      1.25em;
    --btn-secondary-focus-inset:      -0.125em;
    --btn-secondary-click-scale:      0.955 0.925;
    --btn-secondary-ease-hover:       cubic-bezier(0.675, 0.15, 0.1, 1);
    --btn-secondary-ease-click:       cubic-bezier(0.4, 0, 0.2, 1);
    --btn-secondary-ease-focus:       cubic-bezier(0.32, 0.72, 0, 1);
}

.btn--secondary {
    color: var(--btn-secondary-color);
    user-select: none;
    -webkit-user-select: none;
    background-color: transparent;
    outline-style: none;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    display: inline-grid;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: scale 0.15s var(--btn-secondary-ease-click);
    width:fit-content;
}

.btn--secondary::after {
    content: '';
    display: block;
    position: absolute;
    inset: var(--btn-secondary-focus-inset);
    border-radius: var(--btn-secondary-border-radius);
    transition: box-shadow 0.3s var(--btn-secondary-ease-focus);
    pointer-events: none;
    z-index: 1;
}

.btn--secondary:is(:focus-visible)::after {
    box-shadow: 0 0 0 0.125em var(--btn-secondary-color-focus);
}

.btn--secondary:active {
    scale: var(--btn-secondary-click-scale);
}

.btn--secondary__inner {
    pointer-events: none;
    border-radius: var(--btn-secondary-border-radius);
    z-index: 1;
    padding: var(--btn-secondary-padding);
    grid-area: 1 / 1;
    display: grid;
}

.btn--secondary__text {
    perspective: 10em;
    transform-style: preserve-3d;
    grid-area: 1 / 1;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn--secondary__text .btn--secondary__split-char {
    --base-delay: 0.05s;
    --max-extra: 2.9s;
    --t: calc(var(--index) / max(var(--max-index), 1));
    --curve: sin(calc(var(--t) * 1.5deg));
    --delay: calc(var(--base-delay) + (var(--curve) * var(--max-extra)));
    --rot-t: calc(var(--index) / max(var(--max-index), 1));
    --rot-curve: sin(calc(var(--rot-t) * 30deg));
    --rot-sign: clamp(-1, var(--signed-index), 1);
    --rot-max: 36deg;
    display: inline-block;
}

.btn--secondary__text.is--default .btn--secondary__split-char {
    transition: transform 0.325s var(--btn-secondary-ease-hover), translate 0.425s var(--btn-secondary-ease-hover), rotate 0.45s var(--btn-secondary-ease-hover), opacity 0.15s ease-out;
}

.btn--secondary__text.is--hover .btn--secondary__split-char {
    transition: transform 0.35s var(--btn-secondary-ease-hover), translate 0.35s var(--btn-secondary-ease-hover), rotate 0.35s var(--btn-secondary-ease-hover), opacity 0.15s 0.1s ease-out;
    rotate: 1 0 0 -72deg;
    transform: rotateZ(calc(var(--rot-sign) * var(--rot-curve) * var(--rot-max) * -1)) scale(0.65);
    translate: calc(var(--signed-index) * 0.125em) calc(var(--btn-secondary-translate-y) * 1) 0;
    opacity: 0;
}

.btn--secondary__bg {
    background-color: var(--btn-secondary-color-background);
    border-radius: var(--btn-secondary-border-radius);
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .btn--secondary__text .btn--secondary__split-char {
        will-change: transform, translate, rotate, opacity;
    }

    .btn--secondary:is(:hover, :focus-visible) .btn--secondary__text.is--default .btn--secondary__split-char,
    [data-hover]:is(:hover, :focus-visible) .btn--secondary .btn--secondary__text.is--default .btn--secondary__split-char {
        translate: calc(var(--signed-index) * 0.125em) calc(var(--btn-secondary-translate-y) * -1) 0;
        rotate: 1 0 0 72deg;
        transform: rotateZ(calc(var(--rot-sign) * var(--rot-curve) * var(--rot-max) * -1)) scale(0.65);
        opacity: 0;
        transition: transform 0.35s var(--delay) var(--btn-secondary-ease-hover), translate 0.35s var(--delay) var(--btn-secondary-ease-hover), rotate 0.35s var(--delay) var(--btn-secondary-ease-hover), opacity 0.15s calc(var(--delay) + 0.1s) ease-out;
    }

    .btn--secondary:is(:hover, :focus-visible) .btn--secondary__text.is--hover .btn--secondary__split-char,
    [data-hover]:is(:hover, :focus-visible) .btn--secondary .btn--secondary__text.is--hover .btn--secondary__split-char {
        translate: 0 0 0;
        rotate: 1 0 0 0deg;
        transform: rotateZ(0deg) scale(1);
        opacity: 1;
        transition: transform 0.325s calc(var(--delay) + 0.05s) var(--btn-secondary-ease-hover), translate 0.425s calc(var(--delay) + 0.05s) var(--btn-secondary-ease-hover), rotate 0.45s calc(var(--delay) + 0.05s) var(--btn-secondary-ease-hover), opacity 0.15s calc(var(--delay) + 0.075s) ease-out;
    }
}

/* ============================================
   SUBTITLE
   ============================================ */

.subtitle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subtitle::before,
.subtitle::after {
    content: '';
    display: block;
    width: 35px;
    height: 1px;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.subtitle--white::before,
.subtitle--white::after {
    background-color: var(--color-white);
}