/* ==========================================================================
   CT Law Theme — Visual Treatment ("glass + grain + glow")
   Additive re-skin layer. Loads after main/header/footer/responsive so it can
   refine their look without changing layout, markup order or copy.
   ========================================================================== */

/* ---------- Treatment tokens (aligned to existing brand hues) ---------- */
:root {
    --aubergine: #1d1533;
    --aubergine-deep: #120c22;
    --gold: #cba469;            /* matches existing --color-accent */
    --gold-soft: #ddc28d;
    --cream: #ece6dc;
    --cream-warm: #f4efe6;
    --text-soft: rgba(244, 240, 235, .90);
    --text-mute: rgba(228, 222, 232, .62);

    --blur-glass: 18px;
    --grain-opacity: .10;       /* subtle is the whole game (0.06–0.12) */
    --bloom-blur: 80px;
    --glow-gold: 0 0 14px rgba(200, 164, 104, .35);
    --shadow-soft: 0 40px 80px -28px rgba(0, 0, 0, .7);
    --shadow-card: 0 20px 44px -24px rgba(40, 28, 60, .28);
    --radius-glass: 22px;
}

/* ---------- Reusable film grain ---------- */
.tx-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Drift keyframes (blooms) ---------- */
@keyframes tx-drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 40px); } }
@keyframes tx-drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(36px, -30px); } }
@keyframes tx-drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, 28px); } }

/* ==========================================================================
   DARK SECTIONS (hero, CTA band, footer)
   ========================================================================== */
.tx-dark {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* 2a. Base atmospheric gradients */
.hero.tx-dark {
    background-color: var(--aubergine-deep);
    background-image: radial-gradient(130% 120% at 78% 8%, #2b2046 0%, #1d1533 48%, #150f28 78%, #110b20 100%);
}
.section-cta.tx-dark,
.site-footer.tx-dark {
    background-color: var(--aubergine-deep);
    background-image: radial-gradient(120% 140% at 50% 0%, #221a3a, #150f28 70%, #110b20);
}

/* 2b. Colour blooms */
.tx-bloom {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--bloom-blur));
    opacity: .55;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}
.tx-bloom.gold {
    width: 520px; height: 520px; top: -120px; right: 4%;
    background: radial-gradient(circle, rgba(200, 164, 104, .55), rgba(200, 164, 104, 0) 70%);
    animation: tx-drift1 22s ease-in-out infinite;
}
.tx-bloom.plum {
    width: 560px; height: 560px; bottom: -180px; right: 18%;
    background: radial-gradient(circle, rgba(150, 68, 128, .45), rgba(150, 68, 128, 0) 70%);
    animation: tx-drift2 28s ease-in-out infinite;
}
.tx-bloom.violet {
    width: 600px; height: 600px; top: 30%; left: -160px;
    background: radial-gradient(circle, rgba(86, 68, 170, .40), rgba(86, 68, 170, 0) 70%);
    animation: tx-drift3 32s ease-in-out infinite;
}

/* Calmer blooms for the smaller CTA band + footer (~40% smaller, lower opacity) */
.tx-calm .tx-bloom { opacity: .40; }
.tx-calm .tx-bloom.gold { width: 312px; height: 312px; }
.tx-calm .tx-bloom.plum { width: 336px; height: 336px; }
.tx-calm .tx-bloom.violet { width: 360px; height: 360px; }

/* 2c. Vignette + grain over the blooms */
.tx-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%);
}
.tx-dark .tx-grain { z-index: 2; }

/* 2d. Keep existing content above the new layers */
.hero.tx-dark .hero-overlay { display: none; }      /* superseded by gradient + vignette */
.hero.tx-dark .hero-logo-bg { z-index: 3; }          /* logo animation (see §6) */
.hero.tx-dark .hero-content { z-index: 4; }
.section-cta.tx-dark > .container { position: relative; z-index: 4; }
.site-footer.tx-dark > .footer-main,
.site-footer.tx-dark > .footer-bottom { position: relative; z-index: 4; }

/* 2e. Frosted-glass panel (hero text block; optional on CTA box) */
.tx-glass {
    background: rgba(24, 17, 40, .34);
    backdrop-filter: blur(var(--blur-glass)) saturate(135%);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(135%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-glass);
    padding: 46px 48px;
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ==========================================================================
   §6 — Logo animation: glow + reduced-motion settle (markup preserved)
   ========================================================================== */
.hero .hero-logo-svg {
    filter: drop-shadow(var(--glow-gold));
    animation: tx-pulse 6s ease-in-out 2.8s infinite;
}
@keyframes tx-pulse {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(200, 164, 104, .35)); }
    50% { filter: drop-shadow(0 0 22px rgba(200, 164, 104, .60)); }
}

/* ==========================================================================
   LIGHT SECTIONS (Our Approach, Practice Areas)
   ========================================================================== */
.section-credibility,
.section-practice-areas {
    position: relative;
    background-color: var(--cream-warm);
}
.section-credibility > .container,
.section-practice-areas > .container {
    position: relative;
    z-index: 1;
}
.section-credibility::after,
.section-practice-areas::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft-shadow cards, no hard border */
.practice-card {
    border: 0.5px solid rgba(40, 28, 60, .08);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    background: #fbf8f2;
    transition: transform .3s ease, box-shadow .3s ease;
}
.practice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px -22px rgba(40, 28, 60, .38);
    border-color: rgba(40, 28, 60, .08);
}

/* Our Approach pillars — soften the gold rule with a faint glow */
.credibility-item {
    border-left: 2px solid var(--gold);
    box-shadow: -1px 0 8px rgba(200, 164, 104, .25);
}

/* ==========================================================================
   §4 — Buttons: minimal ghost / outline. No gold fill, gradient, or glow.
   Primary = gold hairline + gold text; secondary = light hairline.
   ========================================================================== */
.btn-primary {
    background-color: transparent;
    background-image: none;
    color: var(--gold-soft);
    border: 1px solid var(--gold);
    border-radius: 2px;
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary:hover {
    background-color: rgba(203, 164, 105, .12);
    background-image: none;
    border-color: var(--gold-soft);
    color: var(--gold-soft);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Hero CTA ("Get in touch") — a gold hairline that draws itself on hover.
   At rest the button is gold text only (no frame). On hover/focus a single
   gold line runs around the perimeter to build the full frame: ::before
   traces top → right, ::after traces bottom → left (both clockwise), meeting
   at the opposite corners. Scoped to the hero so other btn-primary uses keep
   their static frame.
   -------------------------------------------------------------------------- */
.hero .hero-buttons .btn-primary {
    position: relative;
    border: 0;
    background-color: transparent;
}
.hero .hero-buttons .btn-primary::before,
.hero .hero-buttons .btn-primary::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border-radius: 2px;
    pointer-events: none;
    /* Hidden at rest so the zero-size corners don't paint stray 1px gold dots;
       only revealed while the frame is drawn. */
    opacity: 0;
    /* leave state: retract the height first, then the width, then hide */
    transition: height .22s ease 0s, width .22s ease .22s, opacity 0s linear .44s;
}
.hero .hero-buttons .btn-primary::before {
    top: 0;
    left: 0;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}
.hero .hero-buttons .btn-primary::after {
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}
.hero .hero-buttons .btn-primary:hover,
.hero .hero-buttons .btn-primary:focus-visible {
    background-color: transparent;
    color: var(--gold-soft);
}
.hero .hero-buttons .btn-primary:hover::before,
.hero .hero-buttons .btn-primary:hover::after,
.hero .hero-buttons .btn-primary:focus-visible::before,
.hero .hero-buttons .btn-primary:focus-visible::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    /* enter state: draw the width first, then the height */
    transition: width .22s ease 0s, height .22s ease .22s, opacity 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero-buttons .btn-primary::before,
    .hero .hero-buttons .btn-primary::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   CTA buttons — same gold hairline draw-in as the hero CTA, so the whole site
   shares one button language. Both are frameless text at rest; on hover a single
   line runs round the perimeter. Primary draws a gold frame, the phone (outline)
   button draws a lighter frame, preserving the primary/secondary hierarchy.
   -------------------------------------------------------------------------- */
.section-cta .cta-buttons .btn-primary,
.section-cta .cta-buttons .btn-outline {
    position: relative;
    border: 0;
    background-color: transparent;
}
.section-cta .cta-buttons .btn-primary::before,
.section-cta .cta-buttons .btn-primary::after,
.section-cta .cta-buttons .btn-outline::before,
.section-cta .cta-buttons .btn-outline::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: height .22s ease 0s, width .22s ease .22s, opacity 0s linear .44s;
}
.section-cta .cta-buttons .btn-primary::before,
.section-cta .cta-buttons .btn-outline::before {
    top: 0;
    left: 0;
}
.section-cta .cta-buttons .btn-primary::after,
.section-cta .cta-buttons .btn-outline::after {
    right: 0;
    bottom: 0;
}
/* Primary = gold hairline */
.section-cta .cta-buttons .btn-primary::before {
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}
.section-cta .cta-buttons .btn-primary::after {
    border-bottom: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}
/* Secondary (phone) = light hairline */
.section-cta .cta-buttons .btn-outline::before {
    border-top: 1px solid rgba(255, 255, 255, .55);
    border-right: 1px solid rgba(255, 255, 255, .55);
}
.section-cta .cta-buttons .btn-outline::after {
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    border-left: 1px solid rgba(255, 255, 255, .55);
}
/* Keep text colour stable and the fill clean at rest and on hover */
.section-cta .cta-buttons .btn-primary,
.section-cta .cta-buttons .btn-primary:hover,
.section-cta .cta-buttons .btn-primary:focus-visible {
    color: var(--gold-soft);
    background-color: transparent;
}
.section-cta .cta-buttons .btn-outline,
.section-cta .cta-buttons .btn-outline:hover,
.section-cta .cta-buttons .btn-outline:focus-visible {
    color: var(--cream);
    background-color: transparent;
}
/* Draw the frame in on hover / focus */
.section-cta .cta-buttons .btn-primary:hover::before,
.section-cta .cta-buttons .btn-primary:hover::after,
.section-cta .cta-buttons .btn-primary:focus-visible::before,
.section-cta .cta-buttons .btn-primary:focus-visible::after,
.section-cta .cta-buttons .btn-outline:hover::before,
.section-cta .cta-buttons .btn-outline:hover::after,
.section-cta .cta-buttons .btn-outline:focus-visible::before,
.section-cta .cta-buttons .btn-outline:focus-visible::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: width .22s ease 0s, height .22s ease .22s, opacity 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
    .section-cta .cta-buttons .btn-primary::before,
    .section-cta .cta-buttons .btn-primary::after,
    .section-cta .cta-buttons .btn-outline::before,
    .section-cta .cta-buttons .btn-outline::after {
        transition: none;
    }
}

/* Secondary buttons on dark contexts: hero secondary + CTA phone button */
.hero .btn-outline-light,
.section-cta .btn-outline {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 2px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color .25s ease, border-color .25s ease;
}
.hero .btn-outline-light:hover,
.section-cta .btn-outline:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .5);
    color: var(--cream);
}

/* ==========================================================================
   §5 — Section seams REMOVED. Clean, crisp edges between sections — no fuzzy
   fade bands. (Dark sections keep their own gradient; meeting cream is a clean
   intentional edge, with no pale midpoint and therefore no glare.)
   ========================================================================== */

/* ==========================================================================
   §3 (patch) — About section: dark graphite so the portrait blends into the
   background (its studio backdrop is graphite), with a soft bloom + grain for
   depth. The photo feather reverts to the matching graphite from main.css.
   ========================================================================== */
.section-about.tx-dark {
    background: #252527;
}
.section-about.tx-dark > .container { position: relative; z-index: 4; }
.section-about .tx-bloom { opacity: .38; }     /* one soft bloom, calmer */

/* Blend the portrait into the graphite: a soft radial mask fades the photo's
   edges to transparent (revealing the section behind), so the rectangular
   studio backdrop dissolves away instead of reading as a panel. */
.section-about .attorney-photo-wrapper { background: transparent; }
.section-about .attorney-photo-wrapper::after { box-shadow: none; }
.section-about .attorney-photo {
    -webkit-mask-image: radial-gradient(125% 115% at 50% 42%, #000 58%, rgba(0, 0, 0, 0) 97%);
    mask-image: radial-gradient(125% 115% at 50% 42%, #000 58%, rgba(0, 0, 0, 0) 97%);
}

/* ==========================================================================
   §7 — Type refinements (light touch)
   ========================================================================== */
.hero-title,
.cta-title { color: var(--text-soft); }
.hero-text,
.cta-text,
.page-hero-desc { color: var(--text-mute); }
.page-hero-label { letter-spacing: .32em; }

/* ==========================================================================
   §8 — Fallbacks, accessibility, performance
   ========================================================================== */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .tx-glass { background: rgba(20, 14, 34, .82); }
}

@media (prefers-reduced-motion: reduce) {
    .tx-bloom { animation: none !important; }
    .hero .hero-logo-svg { animation: none !important; }
    /* Logo settles on its final, complete frame instead of mid-draw */
    .logo-stroke-circle,
    .logo-stroke-diagonal,
    .logo-stroke-gold {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* Mobile: blurred blooms + backdrop-filter are GPU-heavy — lighten the load */
@media (max-width: 768px) {
    :root { --bloom-blur: 60px; }
    .tx-bloom.violet { display: none; }   /* drop to two blooms */
    .tx-glass { padding: 32px 24px; }
}