/* Homepage, Birda card (October 2026): "from the flight to the answer", on the Birda sky. The phone is the only stage
   and everything happens on its screen, in Silvia's own screens (Photo ID onboarding), one change at a time:
   1. Birda's silver iPhone stands in the grass with its camera open; the goldfinch is in the viewfinder, out of focus.
   2. The focus square finds the bird and the picture sharpens; the shutter is tapped and the screen flashes.
   3. The app takes over ("Identifying your photo..."), and the photo just taken becomes the analysis ring: the
      viewfinder's rectangle closes into its circle and moves to the ring's place, the ring's track appears round it.
   4. The ring fills with the little bird riding its tip.
   5. "Your bird identified!" is pushed in, its match card rises and confetti bursts from it.
   It replaced a version where a drawn goldfinch flew in, a second one appeared on the screen, the phone (tilted) turned
   round to a drawn back and a ring flew out of it (Silvia: too many things turning into other things, "caótica").
   Script: assets/js/home-birda.js, which holds the first frame until the card plays. With reduced motion or no script
   it shows the last frame: the phone on "Your bird identified!". Sized in container units. */
.hb{position:absolute;inset:0;background:#E3F0FF;overflow:hidden;container-type:size;pointer-events:none;
  --olg:.8px}   /* the grass outline (1.5px on the hero): thinner here, where the blades are smaller, so it stays green */
/* the homepage sizes and zooms every img inside a card cover; nothing in here should follow that */
.sb-card .sb-card-image .hb img{position:absolute;inset:auto;max-width:none;width:100%;height:auto;object-fit:fill;transition:none;transform:none;display:block}
/* the meadow: the sun, birds far away, the grass of the Birda illustrations */
.hb-sun{position:absolute;left:8cqw;top:9cqh;width:10cqh;aspect-ratio:1;border-radius:50%;background:#FFC83D}
.hb-flock{position:absolute;left:0;width:100%;height:4cqh;animation:hbFlock var(--d,28s) linear var(--dl,0s) infinite}
/* no container units inside @keyframes (here and in hbDrift): Safari on iPhone does not always resolve them, and the
   birds and clouds stood still on Silvia's phone. Percentages of the full-width row instead */
.hb-flock i{position:absolute;left:var(--x,0);top:var(--y,0);width:calc(2.4cqh * var(--s,1));height:calc(1.2cqh * var(--s,1));background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 7 Q5.5 1 10 6 Q14.5 1 19 7' fill='none' stroke='%232A2D4B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");animation:hbFlap .45s ease-in-out var(--fd,0s) infinite alternate}
@keyframes hbFlock{from{transform:translate(-10%,0)}50%{transform:translate(50%,-37.5%)}to{transform:translate(110%,0)}}
@keyframes hbFlap{from{transform:scaleY(1)}to{transform:scaleY(.35) translateY(20%)}}
/* the grass drawn as on the case study hero, in the same blade proportion (14% of the card's height, 1.39 times its
   width). Silvia found it took too much room (three times): it sits half below the card's bottom edge, so only the
   top half of the blades shows. Drawn at half the size instead, the blades were mostly outline and dark */
.hb-grass{position:absolute;left:-19.5%;bottom:-7%;width:139%;height:14%}
/* in front of the phone the grass stands a little higher than behind it, so its blades cross the phone's base and
   hide its bottom corners: the phone stands in the grass (Silvia, again: "volando sobre el césped") */
.hb-grass-back{bottom:-3.5%}
.hb-grass-front{bottom:-2%}
.hb-grass svg{display:block;width:100%;height:100%}
.hb-cloud{position:absolute;left:0;top:var(--t);width:100%;animation:hbDrift var(--d) linear var(--dl) infinite}
.hb-cloud svg{display:block;width:var(--w)}
@keyframes hbDrift{from{transform:translateX(-30%)}to{transform:translateX(130%)}}

/* the phone: straight, centred and big, the size of the other covers' phones (83.8% of the card's height, as
   Thortful's), standing in the grass: its whole body
   shows and its base sits behind the front blades (Silvia: not cut by the card's edge, not floating) */
.hb-phone{position:absolute;left:calc(50% - 19.35cqh);top:14.2cqh;width:38.7cqh;aspect-ratio:750/1624}
.hb-front{position:absolute;inset:0;border-radius:6.4cqh;background:#0B0B0C;box-shadow:0 0 0 .55cqh #C9CDD3,0 0 0 .8cqh #A3A8B0,0 3cqh 6cqh rgba(20,40,80,.18),0 .8cqh 1.8cqh rgba(20,40,80,.1)}
/* the screen; the explicit rounded clip is for Safari on iPhone, which does not clip moving children to a rounded
   overflow box */
.hb-screen{position:absolute;inset:.8cqh;border-radius:5.6cqh;overflow:hidden;background:#000;clip-path:inset(0 round 5.6cqh);-webkit-clip-path:inset(0 round 5.6cqh);isolation:isolate}
.hb-screen>*,.hb-pg>*{position:absolute}
/* the page that is pushed back: the camera, then the Analysing screen (s3) with the photo and its ring */
.hb-pg{inset:0}
.sb-card .sb-card-image .hb .hb-uiimg{inset:0;height:100%}
.hb-ui{inset:0;width:100%;height:100%}
.hb-shut{transform-box:fill-box;transform-origin:50% 50%}
.sb-card .sb-card-image .hb .hb-s3{left:0;top:0;height:100%;opacity:0}
/* Silvia's camera screen (3.2 Camera in her user flow): the viewfinder, 13.67% to 72.17% of the screen, shows the real
   goldfinch photo. The same photo closes into the analysis ring's circle, its shape (a clip in its own pixels) and its size
   in one animation (script) */
.hb-view{left:0;top:13.67%;width:100%;height:58.5%;overflow:hidden}
.sb-card .sb-card-image .hb .hb-vphoto{left:50%;top:0;height:100%;width:auto;aspect-ratio:1;transform:translateX(-50%)}
.hb-focus{position:absolute;left:23.5%;top:25%;width:24%;aspect-ratio:1;margin:-12% 0 0 -12%;border:.25cqh solid #FFD60A;opacity:0}
/* the analysis ring, where it is on Silvia's Analysing screen: centred at 628 of 1624, 404 of 750 wide */
.hb-sring{left:50%;top:38.67%;width:53.87%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0}
.hb-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hb-orbit{position:absolute;inset:0}
.hb-rider{position:absolute;left:33.2%;bottom:96.3%;width:33.6%;transform-origin:50% 100%}
.sb-card .sb-card-image .hb .hb-rider img{position:static}
.hb-shade{inset:0;background:#000;opacity:0}
/* the screen clears behind the photo as it grows back out of the ring into the result's photo (Silvia, 17 October 2026:
   grow, not a new page pushed in, the camera's shrink in reverse); the result's words then appear round it */
.hb-blank{left:0;right:0;bottom:0;top:6%;background:#fff;opacity:0}   /* under the status bar (its glyphs end at 4.6%), which stays */
/* "Your bird identified!" (s4), pushed in from the right like any step forward; its card is where the screen has it
   (48, 1008, 660 x 200 of 750 x 1624). At rest (the last frame) it is the screen */
/* the photo growing out of the ring is the result's own photo (a window on hb-result.webp, the screen s4 fades in
   with): it starts as the ring's circle, on the part of it that is the ring's photo, and opens to its whole box, so it
   lands on s4's photo pixel for pixel (script) */
.sb-card .sb-card-image .hb .hb-grow{left:0;top:0;width:100%;height:100%;opacity:0}
.hb-s4{inset:0;background:#fff}
.sb-card .sb-card-image .hb .hb-s4>img{left:0;top:0;height:100%}
.hb-s4>s{right:100%;top:0;bottom:0;width:2.6cqh;background:linear-gradient(to left,rgba(0,0,0,.13),rgba(0,0,0,0));opacity:0}
.hb-card{position:absolute;left:6.4%;top:62.07%;width:88%;aspect-ratio:1320/400;border-radius:1.1%/3.6%;overflow:hidden}
.sb-card .sb-card-image .hb .hb-card img{inset:0;height:100%}
.hb-island{left:50%;top:1.5%;width:28%;height:3.3%;transform:translateX(-50%);border-radius:999px;background:#000;z-index:3}
.hb-touch{left:50%;top:80.8%;width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;border-radius:50%;background:rgba(255,255,255,.35);border:.2cqh solid rgba(255,255,255,.8);opacity:0;z-index:3}
.hb-shot{inset:0;background:#FFFFFF;opacity:0;z-index:4}
.hb-flash{position:absolute;inset:0;background:#FFFFFF;opacity:0}

/* a little celebration when the right answer lands (Silvia: "algo de celebración, para que se entienda"): confetti
   in the flat Birda colours with the navy outline of the illustrations, bursting from the card (home-birda.js places
   it on the card) */
.hb-conf{position:absolute;left:50%;top:50%;width:3.4cqh;height:1.5cqh;margin:-.75cqh 0 0 -1.7cqh;background:var(--c);border:.25cqh solid #2A2D4B;border-radius:.3cqh;opacity:0;z-index:4}
.hb-conf.is-dot{width:2.1cqh;height:2.1cqh;margin:-1.05cqh 0 0 -1.05cqh;border-radius:50%}

/* the loops (clouds, far-away birds) only run while the card is in view and its sheet has landed (.is-on, set by
   home-birda.js): nothing in the card repaints while the sheet travels, and nothing runs out of sight */
.hb:not(.is-on) .hb-cloud,.hb:not(.is-on) .hb-flock,.hb:not(.is-on) .hb-flock i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hb-cloud,.hb-flock,.hb-flock i{animation:none}}
/* phones: the phone keeps the desktop's size, 84% of the card's height, the same as Thortful's and Openbank's (Silvia,
   17 October 2026: made 1.24 times bigger it ran off the card and looked squat, "no parece un iPhone") */
/* phones: the card is 4:5 (Silvia, 17 October 2026), so the grass box is made wider to keep the desktop's blade shape
   (its box is 14.3 times as wide as it is tall there): 250% of the card's width, centred */
@media (max-width:767px){.hb-grass{left:-75%;width:250%}}