/*!
 * Theme Name:  MyoFlow Dojo
 * Theme URI:   https://www.myoflowmassage.com
 * Author:      Vitro Media Lab
 * Author URI:  https://vitromedialab.com
 * Description: A bespoke WordPress theme for MyoFlow Massage. Grounded in the Dojo aesthetic: intentional whitespace, asymmetric CSS Grid ("Playing Jazz"), and a Tension & Release rhythm that mirrors the bodywork practice itself.
 * Version:     1.0.0
 * Requires at least: 6.4
 * Tested up to: 6.7
 * Requires PHP: 8.1
 * License:     GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: myoflow
 */

/*
 * All component and utility styles live in assets/css/input.css (Tailwind).
 * This file is kept only because WordPress requires it for theme metadata.
 * Below: CSS custom properties used by the Alignment Animation, plus the
 * animation's structural CSS which cannot be expressed as Tailwind utilities.
 */

:root {
    /* Brand colors — shared with SVG fill attributes in the animation section */
    --brand-navy:             #16245E;
    --brand-navy-deep:        #0D1830;
    --brand-gold:             #F0C030;
    --brand-gold-light:       #F5D460;
    --brand-cream:            #F5F0E8;
    --brand-linen:            #EDE5D5;
    /* Tatami grid animation — warm near-black, not blue */
    --brand-color-subtle-dark: #1a1a1a;
    --brand-color-dark:        #1a1a1a;
}


/* ============================================================
   ALIGNMENT ANIMATION — Scroll-driven SVG assembly
   Section: .align-reset-section / #alignment-scene
   The user scrolls through 300vh while a sticky viewport holds
   the SVG pieces. JS calculates progress and slides the shapes
   from scattered starting positions into perfect center alignment.
============================================================ */

/* Tatami grid pieces — layout and opacity handled by Tailwind in markup.
   Only will-change is set here so the browser can optimise the layer. */
.parallax-piece,
[data-scatter] {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .parallax-piece,
    [data-scatter] { will-change: auto; }
}