/* Airdrie 449 story pieces: journey rail, hero collage and fence, the chickadee guide and its perches,
   the life-at-home drawing and the line art that draws itself. Behaviour is in assets/js/story.js.
   Every animation here sits behind prefers-reduced-motion: no-preference (base.css also switches them off). */

/* ---------- Journey rail (header, desktop) ---------- */
.rail ol{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.rail li{display:flex;align-items:center}
.rail li + li::before{content:"";width:clamp(14px,2vw,30px);margin-inline:8px;border-top:1.5px dashed var(--line-strong);transition:border-color .3s}
.rail li.is-done + li::before,.rail li.is-done::before{border-top-style:solid;border-top-color:var(--cta)}
.rail a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:40px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:999px;transition:color .2s}
.rail a:hover{color:var(--ink)}
.rail-n{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-strong);font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);transition:background-color .25s,border-color .25s,color .25s}
.rail a[aria-current="step"]{color:var(--ink)}
.rail a[aria-current="step"] .rail-n{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.rail li.is-done .rail-n{background:var(--accent);border-color:var(--accent)}
.rail .rail-cta{min-height:44px;padding:8px 18px 8px 8px;color:var(--on-cta);font-size:14.5px}
.rail .rail-cta:hover{color:var(--on-cta)}
.rail .rail-cta .rail-n{border-color:transparent;background:rgba(255,255,255,.18);color:var(--on-cta)}
.rail .rail-cta[aria-current="step"]{color:var(--on-cta);box-shadow:0 0 0 4px var(--accent-soft),0 14px 28px -14px var(--cta-shadow)}
.rail .rail-cta[aria-current="step"] .rail-n{background:var(--accent);color:var(--accent-ink)}

@media (max-width:1180px) and (min-width:1041px){
  .rail a{font-size:13.5px}
  .rail li + li::before{width:12px;margin-inline:6px}
}
/* Tablet: the rail becomes a second row of the header */
@media (max-width:1040px) and (min-width:721px){
  html{scroll-padding-top:128px}
  .mobile-menu{top:109px}
  .header-in{flex-wrap:wrap;height:auto;padding-block:10px 8px;row-gap:6px}
  .rail{order:3;width:100%;display:block}
  .header .rail .rail-cta{display:inline-flex;min-height:40px;padding:6px 14px 6px 6px;font-size:13.5px}
  .rail ol{justify-content:space-between}
  .rail li:not(:last-child){flex:1}
  .rail li:last-child{flex:none}
  .rail li + li::before{flex:1;min-width:10px}
  .rail a{font-size:13.5px}
}
@media (max-width:720px){ .rail{display:none} }

/* Phones: the bottom bar waits until the hero's own buttons have scrolled away (story.js sets .float-on) */
@media (max-width:720px){
  .js-float .float{transform:translateY(calc(100% + 28px));opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility .35s}
  .js-float.float-on .float{transform:none;opacity:1;visibility:visible}
  .js-float .wa-fab{bottom:calc(16px + env(safe-area-inset-bottom));transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .2s}
  .js-float.float-on .wa-fab{translate:0 -70px}
}
/* Phones: a slim step strip that sits just above the bottom bar */
.rail-m{display:none}
@media (max-width:720px){
  .rail-m{display:flex;align-items:center;gap:2px;position:fixed;left:12px;right:76px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:79;height:38px;padding:0 14px 0 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(51,20,44,.4);visibility:hidden;transform:translateY(52px);transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
  .rail-m.is-shown{visibility:visible;transform:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .rail-m a{display:flex;align-items:center;justify-content:center;width:28px;height:34px;border-radius:8px}
  .rail-m a i{display:block;width:20px;height:5px;border-radius:5px;background:var(--line-strong);transition:background-color .25s,width .25s}
  .rail-m a.is-done i{background:var(--accent)}
  .rail-m a[aria-current="step"] i{width:24px;background:var(--cta)}
  .rail-m-label{min-width:0;margin-left:6px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rail-m-label b{color:var(--cta);font-weight:800}
}

/* ---------- Hero collage ---------- */
.collage{position:relative;height:clamp(420px,44vw,580px);z-index:2}
.collage-blob{position:absolute;left:-4%;top:2%;width:108%;max-width:none;height:96%;overflow:visible;translate:0 var(--py,0px)}
.collage-blob path{fill:var(--accent-soft)}
.collage-photo{position:absolute;margin:0;overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-lg);translate:0 var(--py,0px)}
.collage-photo img{width:100%;height:100%;object-fit:cover}
.collage-a{left:20%;top:0;width:52%;height:88%;border-radius:50% 50% 28px 28px / 29% 29% 28px 28px}
.collage-b{left:0;bottom:4%;width:38%;aspect-ratio:1;border-radius:50%;border:8px solid var(--bg)}
.collage-c{right:0;top:13%;width:35%;aspect-ratio:4/5;border-radius:28px;border:8px solid var(--bg)}
.collage-c img{object-position:40% 50%}
.collage-sprig{position:absolute;right:6%;bottom:-6%;width:84px;height:auto;overflow:visible}
.collage-sprig path{fill:none;stroke:var(--garden);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Line art (shared) ---------- */
.fence path,.perch-fence path,.final-art svg path,.final-art svg rect,.final-art svg circle,.house .part > :not(text),.lot > :not(text){fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fence .f-garden,.final-art .f-garden{stroke:var(--garden)}
.fence .f-rail,.perch-fence .f-rail{stroke-width:1.4}

/* Hero fence runs the full width, the bird perched on a post */
.hero-fence{position:relative;height:110px;margin-top:6px;z-index:1;pointer-events:none}
.hero-fence .fence{position:absolute;left:0;bottom:0;width:100%;height:110px;overflow:hidden}
.perch-slot{position:absolute;width:64px;height:53px}
.hero-fence .perch-slot{left:var(--bird-x,707px);bottom:79px}
@media (max-width:1040px){ .hero-fence .perch-slot{--bird-x:527px} }
@media (max-width:720px){ .hero-fence .perch-slot{--bird-x:167px} .hero-fence{margin-top:-18px} }

/* ---------- The chickadee ---------- */
.bird{display:block;width:64px;height:53px;overflow:visible}
.bird-head{transform-origin:44px 30px}
.bird-eye{transform-origin:50.5px 25px}
.bird-bob{transform-origin:32px 58px}

/* ---------- Perches: a short fence, the bird and its speech bubble ---------- */
.perch{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;gap:30px;min-height:150px;margin-top:24px}
.perch-post{position:relative;flex:none;width:206px;height:84px}
.perch-fence{display:block;width:206px;height:84px;overflow:hidden}
.perch .perch-slot{left:-19px;bottom:67px;transform:scaleX(-1)}
.bubble{position:relative;align-self:flex-start;max-width:330px;margin-bottom:62px;padding:16px 40px 16px 20px;border-radius:24px 24px 6px 24px;background:var(--surface);border:1.5px solid var(--line-strong);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transform-origin:100% 100%;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .3s}
.bubble.is-open{opacity:1;visibility:visible;transform:none}
.bubble::after{content:"";position:absolute;right:-9px;bottom:10px;width:16px;height:16px;background:var(--surface);border-right:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);transform:rotate(-45deg);border-bottom-right-radius:4px}
.bubble-text{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.3;color:var(--ink);min-height:1.3em}
.bubble-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-btn{display:inline-flex;align-items:center;white-space:nowrap;min-height:38px;padding:8px 16px;border-radius:999px;border:0;background:var(--cta);color:var(--on-cta);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .2s,transform .2s}
.chip-btn:hover{background:var(--cta-hover);transform:translateY(-1px)}
.chip-btn[hidden]{display:none}
.bubble-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);cursor:pointer}
.bubble-x:hover{color:var(--ink)}
.section.tint-green .bubble,.section.tint .bubble{border-color:transparent}

@media (max-width:720px){
  .perch{gap:26px;min-height:168px}
  .perch-post{width:112px;overflow:visible}
  .perch-fence{width:112px}
  .bubble{flex:1;max-width:none;padding:14px 38px 14px 16px;margin-bottom:58px}
  .bubble-text{font-size:17px}
}
@media (max-width:400px){ .bubble{padding:12px 34px 12px 14px} .bubble-text{font-size:16px} .chip-btn{padding:8px 13px;font-size:13.5px} }

/* ---------- Life at home ---------- */
.life-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,72px);align-items:start}
.life-art{position:sticky;top:110px;display:flex;align-items:center;min-height:min(560px,calc(100vh - 150px))}
.house{width:100%;height:auto;aspect-ratio:640/500;overflow:visible}
.house .part > .fl{fill:var(--accent-soft);stroke:none}
.house .part > .fl-green,.lot .fl.fl-green{fill:var(--garden-soft)}
.house .dash,.lot .dash{stroke-dasharray:5 6}
.house .part > .lead{stroke:var(--muted);stroke-width:1.2}
.house .ann{font-family:var(--font-display);font-style:italic;font-size:17px;fill:var(--muted)}
.house .ann-sm{font-size:13px}
.house .part-3 > path:nth-child(2),.house .part-3 > path:nth-child(3){stroke:var(--muted)}
.cam{transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.life-steps{margin:0;padding:0;list-style:none}
.life-step{display:flex;flex-direction:column;justify-content:center;min-height:78vh;padding-block:6vh}
.life-step:first-child{min-height:64vh;padding-top:0}
.life-step h3{margin-top:26px;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.life-step p{margin-top:12px;max-width:44ch;color:var(--muted)}
.life-photo{position:relative;margin:0;overflow:hidden;background:var(--surface-2);aspect-ratio:5/4;box-shadow:var(--shadow-md)}
.life-photo img{width:100%;height:100%;object-fit:cover}
.shape-arch{width:84%;border-radius:50% 50% 26px 26px / 62% 62% 26px 26px}
.shape-pebble{width:92%;border-radius:150px 28px 150px 28px}
.shape-soft{border-radius:30px}
.life-photo figcaption{position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.94);font-size:12.5px;font-weight:600;color:var(--ink)}
.life-yard{display:grid;gap:14px;padding:28px;border-radius:30px 30px 30px 8px;background:var(--garden-soft)}
.life-yard-fig strong{display:block;font-size:clamp(28px,2.8vw,36px);font-weight:800;letter-spacing:-.03em;color:var(--garden-ink);line-height:1.05}
.life-yard-fig span{display:block;margin-top:2px;font-size:14.5px;font-weight:600;color:var(--garden-ink)}

@media (max-width:1040px){
  .life-grid{grid-template-columns:1fr;gap:0}
  /* Phones and tablets: a compact, solid "stage" pinned under the header. The steps slide under it; story.js
     pans and zooms the drawing (via its viewBox) to the room being read, with that room's label inside the frame.
     The stage stops sticking where the section ends. */
  .life-art{position:sticky;top:var(--stage-top,73px);z-index:5;display:block;height:var(--stage-h);min-height:0;margin:0 calc(-1 * clamp(20px,4vw,32px));padding:8px clamp(20px,4vw,32px) 10px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 16px 18px -16px rgba(51,20,44,.32)}
  .life{--stage-h:clamp(190px,32vh,260px)}
  .house{display:block;width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
  .house .ann{font-size:18px}
  .house .ann-sm{font-size:14px}
  .life-step{scroll-margin-top:calc(var(--stage-top,73px) + var(--stage-h) + 16px)}
  .life-step,.life-step:first-child{min-height:0;padding-block:22px 18px}
  /* only the room in frame keeps its notes, so no half-cut labels from neighbouring rooms */
  .life-art[data-on] .house .part:not(.is-current) text,.life-art[data-on] .house .part:not(.is-current) .lead{opacity:0;transition:opacity .3s}
  .shape-arch,.shape-pebble{width:100%}
  .life-photo{max-height:max(170px,calc(100vh - var(--stage-top,73px) - var(--stage-h) - 260px))}
}
@media (max-width:1040px) and (min-width:721px){ .life{--stage-top:109px} .life-photo{aspect-ratio:16/9;max-width:600px} .life-yard{max-width:600px} }

/* ---------- Freehold lot plan ---------- */
.lot{display:block;width:100%;max-width:440px;height:auto;margin-top:22px;overflow:visible}
.lot .fl{fill:var(--accent-soft);stroke:none}
.lot .f-faint{stroke:var(--line-strong)}
.lot .prop{stroke:var(--cta);stroke-width:2.6;stroke-dasharray:9 7}
.lot-lbl{font-family:var(--font-body);font-size:14px;font-weight:700;fill:var(--ink)}
.lot-edge{font-family:var(--font-display);font-style:italic;font-size:13px;fill:var(--muted)}
.lot-key{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--muted)}
.lot-key-line{flex:none;width:34px;border-top:2.6px dashed var(--cta)}
.own-list{margin-top:22px;padding:18px 20px;border-radius:20px 20px 20px 6px;background:var(--garden-soft);color:var(--garden-ink)}
.own-title{font-weight:700}
.own-list ul{display:grid;gap:4px;margin-top:8px}
.own-list li{display:flex;gap:10px;align-items:center;font-size:15px}
.own-list li::before{content:"";flex:none;width:12px;height:12px;border-radius:12px 0 12px 0;background:var(--garden)}

/* ---------- Final drawing ---------- */
.final-art{position:relative;width:100%;max-width:440px;justify-self:center}
.final-art svg{display:block;width:100%;height:auto;overflow:visible}
.final-art .fl{fill:var(--surface);stroke:none}
.final-art .perch-slot{left:calc(83.1% - 28px);bottom:calc(38% - 1px)}

/* ---------- Drawing on scroll (only when story.js runs and motion is welcome) ---------- */
.js-draw .draw .ln,.js-draw .house .part .ln{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.55,.1,.3,1) var(--dd,0s)}
.js-draw .draw.is-drawn .ln,.js-draw .house .part.is-drawn .ln{stroke-dashoffset:0}
.js-draw .draw .fl,.js-draw .draw .dash,.js-draw .draw .prop,.js-draw .draw text,.js-draw .house .part .fl,.js-draw .house .part .dash,.js-draw .house .part text{opacity:0;transition:opacity .8s ease .7s}
.js-draw .draw.is-drawn .fl,.js-draw .draw.is-drawn .dash,.js-draw .draw.is-drawn .prop,.js-draw .draw.is-drawn text,.js-draw .house .part.is-drawn .fl,.js-draw .house .part.is-drawn .dash,.js-draw .house .part.is-drawn text{opacity:1}
.js-draw .fence .ln{transition-duration:2.6s}
.js-draw .fence .f-garden{--dd:.9s}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .collage-photo{animation:popIn 1s cubic-bezier(.2,.8,.2,1) both}
  .collage-a{animation-delay:.1s}
  .collage-b{animation-delay:.32s}
  .collage-c{animation-delay:.48s}
  .collage-blob{animation:blobIn 1.4s cubic-bezier(.2,.8,.2,1) both}
  .collage-blob path{transform-origin:50% 50%;animation:drift 18s ease-in-out 1.4s infinite alternate}
  .offer{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .2s both}
  @keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.94)}}
  @keyframes blobIn{from{opacity:0;transform:scale(.86)}}
  @keyframes drift{to{transform:rotate(6deg) scale(1.03)}}

  .bird-head{animation:tilt 7s ease-in-out 2.4s infinite}
  .bird-eye{animation:blink 5.5s steps(1) 1s infinite}
  .bird-bob{animation:breathe 3.2s ease-in-out infinite}
  .bird.is-landing{animation:land 1s cubic-bezier(.3,.7,.3,1) both}
  .bird.is-hop{animation:hop .5s cubic-bezier(.3,.7,.3,1)}
  @keyframes tilt{0%,58%,100%{transform:none}62%,72%{transform:rotate(-16deg)}77%,86%{transform:rotate(7deg)}}
  @keyframes blink{0%,95%{transform:none}96%{transform:scaleY(.1)}}
  @keyframes breathe{50%{transform:scaleY(.97) scaleX(1.02)}}
  @keyframes land{0%{opacity:0;transform:translate(26px,-26px) rotate(8deg)}55%{opacity:1;transform:translate(0,-10px) rotate(-4deg)}78%{transform:translate(0,1px) scale(1.04,.93)}100%{transform:none}}
  @keyframes hop{40%{transform:translateY(-12px)}70%{transform:translateY(1px) scale(1.03,.95)}}

  .chip-btn,.rail a{transition:background-color .2s,color .2s,transform .2s}
}

/* Phones: the WhatsApp button waits with the bottom bar, so it never sits on the hero buttons. */
@media (max-width:720px){
  .js-float:not(.float-on) .wa-fab{opacity:0;visibility:hidden;transform:scale(.6);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
  .js-float.float-on .wa-fab{transition:opacity .3s ease,transform .2s,translate .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
}
@media (prefers-reduced-motion:reduce){ .wa-fab{transition:none !important} }

/* ---------- The chickadee's journey: a dotted garden path in the page margin, top to booking ---------- */
.journey{display:none;position:absolute;left:0;top:0;width:100%;height:0;z-index:60;pointer-events:none}
.js-journey .journey{display:block}
.journey-path{position:absolute;left:0;top:0;overflow:visible}
.jp-base{fill:none;stroke:var(--line-strong);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.5 7}
.jp-done{fill:none;stroke:var(--cta);stroke-opacity:.45;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jp-spurs path{fill:none;stroke:var(--line-strong);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.5 6}
.jp-stop circle{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.6;transition:fill .3s,stroke .3s}
.jp-stop text{font-family:var(--font-display);font-size:11px;font-weight:600;fill:var(--muted);transition:fill .3s}
.jp-stop.is-reached circle{fill:var(--ink);stroke:var(--ink)}
.jp-stop.is-reached text{fill:var(--bg)}
.jp-end.is-reached circle{fill:var(--cta);stroke:var(--cta)}
.journey-bird{position:absolute;left:0;top:0;width:64px;height:53px;transform-origin:0 0;will-change:transform}
/* Keep a clear lane for it where the page has no natural side margin */
@media (max-width:1219px){ main .container{padding-right:calc(clamp(20px,4vw,32px) + 30px)} }
@media (max-width:720px){ main .container{padding-right:calc(clamp(20px,4vw,32px) + 24px)} }
@media (max-width:1040px){ .life-art{margin-right:0} }
@media (max-width:720px){ .life-yard{padding:16px 20px;gap:8px} .life-yard-fig strong{font-size:26px} .life-yard-fig span{font-size:13.5px} }