/*
Theme Name: Wild Femme Yoga
Theme URI: https://wildfemmeyoga.com/
Author: Troia Digital
Author URI: https://troiadigital.com/
Description: A bespoke standalone theme for Wild Femme Yoga — embodied wisdom in motion. Earthy, calm layout with a deep-plum and violet palette.
Version: 1.0.0
Text Domain: wild-femme-yoga
Tags: custom, yoga, wellness, somatic, full-width
*/

:root {
    --wfy-plum-deep:   #1A0B2E;
    --wfy-plum-mid:    #2B1547;
    --wfy-purple:      #9D4EDD;
    --wfy-violet:      #C77DFF;
    --wfy-gold:        #F4C430;
    --wfy-gold-soft:   #E5B82E;
    --wfy-pink-pale:   #FFE6F2;
    --wfy-pink-mist:   #FAF0F4;
    --wfy-cream:       #FAF4F7;
    --wfy-cream-warm:  #FAF0F4;
    --wfy-ink:         #141617;
    --wfy-ink-soft:    #2B2436;
    --wfy-mute:        #6B6478;
    --wfy-black:       #151515;
    --wfy-white:       #FFFFFF;

    --wfy-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --wfy-font-ritual:  'Cardo', 'Cormorant Garamond', Georgia, serif;
    --wfy-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --wfy-font-eyebrow: 'Inter', sans-serif;

    --wfy-max:          1240px;
    --wfy-gutter:       clamp(20px, 4vw, 56px);
    --wfy-section-y:    clamp(80px, 12vw, 160px);

    --wfy-radius-sm:    4px;
    --wfy-radius-md:    8px;
    --wfy-radius-lg:    18px;

    --wfy-ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --wfy-shadow-sm:    0 4px 24px rgba(26, 11, 46, 0.08);
    --wfy-shadow-md:    0 18px 48px rgba(26, 11, 46, 0.18);
    --wfy-shadow-glow:  0 0 40px rgba(199, 125, 255, 0.35);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

body {
    margin: 0;
    background: var(--wfy-cream);
    color: var(--wfy-ink);
    font-family: var(--wfy-font-body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    overscroll-behavior-x: none;
    max-width: 100vw;
}

/* Prevent decorative absolute children from punching out of any section */
.wfy-section, .wfy-hero, .wfy-marquee, .wfy-footer { overflow: clip; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--wfy-purple);
    text-decoration: none;
    transition: color 0.25s var(--wfy-ease);
}
a:hover { color: var(--wfy-plum-deep); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wfy-font-display);
    color: var(--wfy-plum-deep);
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-weight: 500;
}

h1 { font-size: clamp(48px, 8vw, 120px); font-weight: 400; }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(24px, 3vw, 36px); }
h4 { font-size: clamp(20px, 2vw, 26px); }

p { margin: 0 0 1.2em; }

.wfy-eyebrow {
    font-family: var(--wfy-font-eyebrow);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wfy-purple);
    margin-bottom: 1em;
    display: inline-block;
}

.wfy-eyebrow--on-dark { color: var(--wfy-violet); }

.wfy-container {
    width: 100%;
    max-width: var(--wfy-max);
    margin-inline: auto;
    padding-inline: var(--wfy-gutter);
}

.wfy-section { padding-block: var(--wfy-section-y); position: relative; }
.wfy-section--cream  { background: var(--wfy-cream); }
.wfy-section--warm   { background: var(--wfy-cream-warm); }
.wfy-section--pink   { background: var(--wfy-pink-mist); }
.wfy-section--plum   { background: var(--wfy-plum-deep); color: var(--wfy-white); }
.wfy-section--plum h1,
.wfy-section--plum h2,
.wfy-section--plum h3,
.wfy-section--plum h4 { color: var(--wfy-white); }
.wfy-section--plum p  { color: rgba(255,255,255,0.78); }

.wfy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 16px 32px;
    font-family: var(--wfy-font-eyebrow);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: var(--wfy-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.3s var(--wfy-ease);
    text-decoration: none;
    line-height: 1;
}
.wfy-btn--gold {
    background: var(--wfy-gold);
    color: var(--wfy-plum-deep);
    box-shadow: 0 8px 24px rgba(244, 196, 48, 0.3);
}
.wfy-btn--gold:hover {
    background: var(--wfy-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(244, 196, 48, 0.45);
    color: var(--wfy-plum-deep);
}
.wfy-btn--plum {
    background: var(--wfy-plum-deep);
    color: var(--wfy-cream);
}
.wfy-btn--plum:hover {
    background: var(--wfy-plum-mid);
    color: var(--wfy-cream);
    transform: translateY(-2px);
}
.wfy-btn--ghost {
    background: transparent;
    color: var(--wfy-plum-deep);
    border-color: var(--wfy-plum-deep);
}
.wfy-btn--ghost:hover { background: var(--wfy-plum-deep); color: var(--wfy-cream); }
.wfy-btn--ghost-light {
    background: transparent;
    color: var(--wfy-cream);
    border-color: rgba(255, 255, 255, 0.4);
}
.wfy-btn--ghost-light:hover {
    background: var(--wfy-cream);
    color: var(--wfy-plum-deep);
    border-color: var(--wfy-cream);
}

.wfy-reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.4s var(--wfy-ease), transform 1.4s var(--wfy-ease); }
.wfy-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Site-wide section fade — every .wfy-section breathes up from the bottom
   the moment it scrolls into view. 1.4s, generous and ritualistic. */
.wfy-section-fade {
    opacity: 0;
    transform: translateY(64px);
    transition: opacity 1.4s var(--wfy-ease), transform 1.4s var(--wfy-ease);
    will-change: opacity, transform;
}
.wfy-section-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Inside a fading section, individual .wfy-reveal animations are redundant —
   the section itself carries the entrance. Skip them. */
.wfy-section-fade .wfy-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.wfy-screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px;
    overflow: hidden;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 9999; background: var(--wfy-gold); padding: 8px 12px; color: var(--wfy-plum-deep); border-radius: 4px; }

/* ============================================================ *
 * Living layer — grain, breath, aurora, mantras
 * ============================================================ */

/* Subtle grain over every section — gives flat colors a paper / skin feel.
   Applied via a child `.wfy-grain` wrapper element so it doesn't conflict
   with section-specific ::after pseudos (e.g. wavy dividers). */
.wfy-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    z-index: 0;
}
.wfy-section--plum .wfy-grain { opacity: 0.12; mix-blend-mode: soft-light; }
.wfy-section { position: relative; }
.wfy-section > * { position: relative; z-index: 1; }
.wfy-section > .wfy-grain { z-index: 0; }

/* Cardo italic — used for ritual/mantra moments */
.wfy-ritual {
    font-family: var(--wfy-font-ritual);
    font-style: italic;
    font-weight: 400;
}

/* Breathing keyframes — slow, 8s ~human breath rhythm */
@keyframes wfyBreath {
    0%, 100% { transform: scale(1); opacity: var(--wfy-breath-min, 0.7); }
    50%      { transform: scale(1.04); opacity: var(--wfy-breath-max, 1); }
}
@keyframes wfyAuroraDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(-3%, 2%, 0) scale(1.05); }
    66%      { transform: translate3d(3%, -2%, 0) scale(1.03); }
}
@keyframes wfyFloatUp {
    0%   { transform: translate3d(0, 30vh, 0) scale(0.6); opacity: 0; }
    15%  { opacity: 0.4; }
    85%  { opacity: 0.4; }
    100% { transform: translate3d(0, -20vh, 0) scale(1); opacity: 0; }
}
@keyframes wfyHaloPulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50%      { transform: scale(1.08); opacity: 0.72; }
}
@keyframes wfySpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes wfyMantraWord {
    0%   { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0) scale(1);     filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .wfy-reveal { opacity: 1; transform: none; }
}