/* Auto-generated split from styles.css — Peak Essence */
/* =========================================================
   v3 — UNIQUE SECTION COMPONENTS
   Each component is intended to appear ONCE on the site.
   Black + orange palette throughout. Animated SVG over photos.
   ========================================================= */

/* ---------- Animated SVG defaults ---------- */
/* Cycle timing: 2s start delay → forward play → 5s hold full → reverse
   play → 5s hold empty → loop. Built into a single 14s keyframe sequence
   so the holds are real pauses (no `alternate` needed).
   The `.skyline` section overrides this to keep its drawing one-shot. */
.anim-svg .stroke-draw { stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.anim-svg.in .stroke-draw { animation: drawCycle 14s var(--ease-arch) 2s infinite both; }
.anim-svg.in .stroke-draw.d-2 { animation-delay: 2.15s; }
.anim-svg.in .stroke-draw.d-3 { animation-delay: 2.30s; }
.anim-svg.in .stroke-draw.d-4 { animation-delay: 2.45s; }
.anim-svg.in .stroke-draw.d-5 { animation-delay: 2.60s; }
.anim-svg.in .stroke-draw.d-6 { animation-delay: 2.75s; }
.anim-svg.in .stroke-draw.d-7 { animation-delay: 2.90s; }
.anim-svg.in .stroke-draw.d-8 { animation-delay: 3.05s; }
.anim-svg .pop { transform-origin: center; transform: scale(.3); opacity: 0; }
.anim-svg.in .pop { animation: popCycle 14s var(--ease-arch) 2s infinite both; }
.anim-svg.in .pop.d-2 { animation-delay: 2.4s; }
.anim-svg.in .pop.d-3 { animation-delay: 2.55s; }
.anim-svg.in .pop.d-4 { animation-delay: 2.7s; }
.anim-svg.in .pop.d-5 { animation-delay: 2.85s; }
.anim-svg.in .pop.d-6 { animation-delay: 3s; }
.anim-svg .rise { transform: translateY(40px); opacity: 0; }
.anim-svg.in .rise { animation: riseCycle 14s var(--ease-arch) 2s infinite both; }
.anim-svg.in .rise.d-2 { animation-delay: 2.2s; }
.anim-svg.in .rise.d-3 { animation-delay: 2.4s; }
.anim-svg.in .rise.d-4 { animation-delay: 2.6s; }
.anim-svg.in .rise.d-5 { animation-delay: 2.8s; }
.anim-svg.in .rise.d-6 { animation-delay: 3s; }

/* Skyline ("Proof at scale") section: keep one-shot forward animations */
.skyline .anim-svg.in .stroke-draw { animation: drawIn 1.6s var(--ease-arch) forwards; animation-iteration-count: 1; }
.skyline .anim-svg.in .pop { animation: popUp 1s var(--ease-arch) forwards; animation-iteration-count: 1; }
.skyline .anim-svg.in .rise { animation: riseUp 1.1s var(--ease-arch) forwards; animation-iteration-count: 1; }
.anim-svg .spin-slow { animation: spinSlow 28s linear infinite; transform-origin: center; transform-box: fill-box; }
.anim-svg .pulse { animation: pulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.anim-svg .blink { animation: blinkLight 4s ease-in-out infinite; }
.anim-svg .blink.b-2 { animation-delay: 1s; }
.anim-svg .blink.b-3 { animation-delay: 2s; }
.anim-svg .swing { animation: swing 5s ease-in-out infinite; transform-origin: top center; transform-box: fill-box; }

@keyframes popUp { to { opacity: 1; transform: scale(1); } }
@keyframes riseUp { to { opacity: 1; transform: none; } }

/* Cycle keyframes used for the looping anim-svg drawings.
   Total 14s: 0–2s play, 2–7s hold full, 7–9s reverse, 9–14s hold empty. */
@keyframes drawCycle {
    0%     { stroke-dashoffset: 1500; }
    14.3%  { stroke-dashoffset: 0; }
    50%    { stroke-dashoffset: 0; }
    64.3%  { stroke-dashoffset: 1500; }
    100%   { stroke-dashoffset: 1500; }
}
@keyframes popCycle {
    0%     { opacity: 0; transform: scale(.3); }
    14.3%  { opacity: 1; transform: scale(1); }
    50%    { opacity: 1; transform: scale(1); }
    64.3%  { opacity: 0; transform: scale(.3); }
    100%   { opacity: 0; transform: scale(.3); }
}
@keyframes riseCycle {
    0%     { opacity: 0; transform: translateY(40px); }
    14.3%  { opacity: 1; transform: none; }
    50%    { opacity: 1; transform: none; }
    64.3%  { opacity: 0; transform: translateY(40px); }
    100%   { opacity: 0; transform: translateY(40px); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes blinkLight { 0%,40%,100% { opacity: .15; } 20% { opacity: 1; } }
@keyframes swing { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ---------- Drafting board frame (wraps animated SVGs) ---------- */
.dboard {
    position: relative;
    background: var(--night);
    border: 1px solid rgba(255,246,229,.1);
    padding: 28px;
    overflow: hidden; isolation: isolate;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.dboard::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(244,193,139,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(244,193,139,.06) 1px, transparent 1px);
    background-size: 24px 24px; pointer-events: none; z-index: 0;
}
.dboard::after {
    content: ""; position: absolute;
    width: 280px; height: 280px;
    right: -80px; bottom: -80px;
    background: radial-gradient(circle, rgba(224,122,43,.32), transparent 70%);
    filter: blur(30px); z-index: 0;
}
.dboard__corner {
    position: absolute; width: 18px; height: 18px;
    border: 1.5px solid var(--orange);
    z-index: 2; pointer-events: none;
}
/* static corner brackets — one in each corner */
.dboard__corner.bl { bottom: 6px; left: 6px;  border-right: 0; border-top: 0;    opacity: .35; }
.dboard__corner.tl { top: 6px;    left: 6px;  border-right: 0; border-bottom: 0; opacity: .35; }
.dboard__corner.br { bottom: 6px; right: 6px; border-left: 0;  border-top: 0;    opacity: .35; }
.dboard__corner.tr { top: 6px;    right: 6px; border-left: 0;  border-bottom: 0; opacity: .35; }
.dboard__label {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(244,193,139,.5); z-index: 2;
}
.dboard__fig {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
    color: rgba(244,193,139,.45); z-index: 2;
}
.dboard svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.dboard--light { background: var(--surface); border-color: var(--line); }
.dboard--light::before {
    background-image:
        linear-gradient(to right, rgba(26,22,18,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,22,18,.05) 1px, transparent 1px);
}
.dboard--light::after { background: radial-gradient(circle, rgba(224,122,43,.16), transparent 70%); }
.dboard--light .dboard__label, .dboard--light .dboard__fig { color: var(--orange-deep); }