/* Wildomi kit: shared v7 components (design/direction-b.md). Mobile first; no drop shadows at rest;
   every move has a reduced-motion and global-pause fallback. */

/* Screen-reader-only text: the shared live region (announce) and the final text behind a scramble. */
.kit-live,.kit-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Fixed bars at the bottom (home roll bar, bag and animal bars) never cover the control that has keyboard focus:
   while one is on screen, focus scrolling keeps a bar's height clear (WCAG 2.4.11). */
html:has(.roll-bar.is-shown,.sticky-cta:not([hidden]),.bag-bar:not([hidden])){scroll-padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}

/* Focus on dark bands and photographs: the shared ink ring with a cream gap disappears on --night and on dark
   photos, so here the pair flips to a cream ring with an ink gap. Buttons keep their firm lower edge. */
:is(.footer-statement,.kit-undo,.roll-bar,.travel,.pg-scene,.pg-band,.trip-band,.sticky-cta,.bag-bar,.co-availability) :focus-visible{outline-color:var(--cream);box-shadow:0 0 0 3px var(--ink)}
:is(.footer-statement,.roll-bar,.travel,.pg-scene,.pg-band,.trip-band,.sticky-cta,.bag-bar) :is(.btn,.co-button):focus-visible{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 3px var(--ink)}

/* Coordinates readout: one small line, tabular figures so scrambling never shifts the layout. */
.coords{display:inline-block;font:500 14px/1.4 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--muted)}
.coords.on-dark{color:var(--cream)}

/* Hold to confirm: a fill grows behind the label while the press is held. */
.hold-button{position:relative;overflow:hidden;isolation:isolate}
.hold-button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--coral);transform:scaleX(var(--hold,0));transform-origin:left;transition:transform .12s linear}
.hold-button:not(.is-holding)::before{transition:transform .2s var(--ease-out)}

/* Timed undo toast. */
.kit-undo{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:70;width:max-content;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:6px 6px 6px 18px;border-radius:var(--pill);background:var(--night);color:var(--cream);font-size:15px;opacity:0;transform:translate(-50%,8px);transition:opacity .2s ease,transform .2s var(--ease-out)}
.kit-undo.visible{opacity:1;transform:translate(-50%,0)}
.kit-undo button{position:relative;min-height:44px;padding:0 18px;border-radius:var(--pill);background:var(--cream);color:var(--ink);font-weight:600;overflow:hidden}
.kit-undo button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--coral);transform-origin:left;animation:kit-undo-run var(--undo-seconds,5s) linear forwards}
.kit-undo.is-paused button::after{animation-play-state:paused}
@keyframes kit-undo-run{to{transform:scaleX(0)}}

/* Receipt: a paper slip that prints down out of a slot, with a torn lower edge. */
.receipt-slot{overflow:hidden;padding-bottom:12px}
.receipt{background:var(--paper);color:var(--ink);padding:20px 18px 30px;font-variant-numeric:tabular-nums;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),95% 100%,90% calc(100% - 10px),85% 100%,80% calc(100% - 10px),75% 100%,70% calc(100% - 10px),65% 100%,60% calc(100% - 10px),55% 100%,50% calc(100% - 10px),45% 100%,40% calc(100% - 10px),35% 100%,30% calc(100% - 10px),25% 100%,20% calc(100% - 10px),15% 100%,10% calc(100% - 10px),5% 100%,0 calc(100% - 10px))}
.receipt.is-waiting{transform:translateY(-100%)}
/* One smooth feed out of the slot that slows as the slip settles; only transform moves, on its own layer. */
.receipt.is-printing{animation:kit-print 2.4s cubic-bezier(.33,.4,.3,1) both;will-change:transform}
@keyframes kit-print{from{transform:translateY(-100%)}to{transform:none}}
.receipt-row{display:flex;justify-content:space-between;gap:16px;padding:6px 0}
.receipt-row.total{margin-top:8px;padding-top:12px;font-weight:600;font-size:18px;background:linear-gradient(var(--line),var(--line)) top/100% 1px no-repeat}

/* Postage stamp frame for a photograph. */
/* Two mask layers: a solid centre plus the perforation pattern, so only the edge is punched. */
.stamp{display:inline-block;padding:8px;background:var(--paper);
 -webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 10px) calc(100% - 10px) no-repeat,radial-gradient(5px at 5px 5px,#0000 98%,#000) -5px -5px/10px 10px round;
 mask:linear-gradient(#000 0 0) center/calc(100% - 10px) calc(100% - 10px) no-repeat,radial-gradient(5px at 5px 5px,#0000 98%,#000) -5px -5px/10px 10px round}
.stamp img{display:block;width:100%;height:100%;object-fit:cover}

/* Fanned prints: the picked animals held like a hand of photos. */
.fan{position:relative;display:flex;justify-content:center;height:72px}
.fan>*{position:absolute;bottom:0;width:48px;height:60px;border:3px solid var(--paper);background:var(--sand);transform:translateX(var(--fan-shift,0)) translateY(calc(-1 * var(--fan-lift,0px))) rotate(var(--fan-turn,0));transform-origin:50% 120%;transition:transform .3s var(--ease-out)}
.fan>* img{width:100%;height:100%;object-fit:cover}

/* Trace loader: the Wildomi W drawn like an animal's GPS track. A position dot leads the line, stops at each turn
   with a small fix ping, then settles as the mark's dot with a wider ping. Line and dot share the same keyframe
   times, so the line's tip stays under the dot. The path is about 104.4 units long (turns at 29.7, 52.2 and 74.7). */
.trace-loader{--trace-dot:.62;--trace-time:2.6s;--trace-move:cubic-bezier(.77,0,.175,1);display:grid;place-items:center;min-height:120px;color:var(--ink)}
.trace-loader svg{width:48px;height:48px;overflow:visible}
.trace-loader path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:105 200;stroke-dashoffset:0;animation:kit-trace-line var(--trace-time) var(--trace-move) infinite}
.trace-loader circle{fill:currentColor;stroke:currentColor;stroke-width:0;transform-box:fill-box;transform-origin:center;
 animation:kit-trace-dot var(--trace-time) var(--trace-move) infinite,kit-trace-ping var(--trace-time) var(--ease-out) infinite}
@keyframes kit-trace-line{
 0%{opacity:0;stroke-dashoffset:105}
 6%,9%{opacity:1;stroke-dashoffset:105}
 25%,30%{stroke-dashoffset:75.3}
 41%,46%{stroke-dashoffset:52.8}
 57%,62%{stroke-dashoffset:30.3}
 78%,94%{opacity:1;stroke-dashoffset:0}
 100%{opacity:0;stroke-dashoffset:0}
}
@keyframes kit-trace-dot{
 0%{opacity:0;transform:translate(-44px,6px) scale(var(--trace-dot))}
 6%,9%{opacity:1;transform:translate(-44px,6px) scale(var(--trace-dot))}
 25%,30%{transform:translate(-34px,34px) scale(var(--trace-dot))}
 41%,46%{transform:translate(-22px,15px) scale(var(--trace-dot))}
 57%,62%{transform:translate(-10px,34px) scale(var(--trace-dot))}
 78%{transform:translate(0,6px) scale(var(--trace-dot))}
 83%,94%{opacity:1;transform:translate(0,0) scale(1)}
 100%{opacity:0;transform:translate(0,0) scale(1)}
}
/* A ring that grows and fades around the dot: once when the signal starts, at each turn, and wider when it settles. */
@keyframes kit-trace-ping{
 0%,6%,25%,41%,57%{stroke-width:0;stroke-opacity:.45}
 11%,30%,46%,62%{stroke-width:7;stroke-opacity:0}
 11.1%,30.1%,46.1%,62.1%{stroke-width:0;stroke-opacity:0}
 83%{stroke-width:0;stroke-opacity:.5}
 93%{stroke-width:12;stroke-opacity:0}
 93.1%,100%{stroke-width:0;stroke-opacity:0}
}
@keyframes kit-trace-wait{50%{opacity:.35}}

/* Scroll fade list: a short scrolling list whose ends fade out softly. */
.fade-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain;
 -webkit-mask:linear-gradient(#0000,#000 24px,#000 calc(100% - 24px),#0000);mask:linear-gradient(#0000,#000 24px,#000 calc(100% - 24px),#0000)}

/* Signature drawn on first view. */
.signature{display:block;width:180px;height:auto;color:var(--ink)}
.signature path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.signature.is-ready path{stroke-dasharray:var(--sig-length,600);stroke-dashoffset:var(--sig-length,600)}
.signature.is-drawing path{animation:kit-sign 1.6s cubic-bezier(.65,0,.35,1) forwards}
.signature.is-drawing path:nth-child(2){animation-delay:1.1s}
.signature.is-drawing path:nth-child(3){animation-delay:1.5s}
@keyframes kit-sign{to{stroke-dashoffset:0}}

/* Iridescent foil for the certificate seal only. */
.foil{background:conic-gradient(from var(--foil-turn,0deg),#e8f7f1,#f6e9f4,#e9eef9,#f7f3e3,#e8f7f1);transition:--foil-turn .4s linear}

@media(prefers-reduced-motion:reduce){
 .receipt.is-printing,.trace-loader path,.signature.is-drawing path,.kit-undo button::after{animation:none}
 .receipt.is-waiting{transform:none}
 .signature.is-ready path{stroke-dashoffset:0}
 /* No travel: the whole mark stays in place and only its dot fades in and out while the page loads. */
 .trace-loader circle{animation:kit-trace-wait 1.6s ease-in-out infinite}
 .hold-button::before,.fan>*,.kit-undo{transition:none}
}
:root[data-motion-paused="true"] .receipt.is-printing,:root[data-motion-paused="true"] .signature.is-drawing path{animation:none;stroke-dashoffset:0}
:root[data-motion-paused="true"] .trace-loader :is(path,circle){animation:none}
:root[data-motion-paused="true"] .receipt.is-waiting{transform:none}
:root[data-motion-paused="true"] .hold-button::before,:root[data-motion-paused="true"] :is(.fan>*,.kit-undo){transition:none}
:root[data-motion-paused="true"] .kit-undo button::after{animation:none}

/* Affordance: what you can tap looks tappable on phones too, where there is no hover.
   Rows of links end in an arrow; names that open a page are underlined; lists of what you
   get carry a check mark and are never styled like links. */
:is(.incl-places a,.jump-list a,.bundle-choose)::after{content:"→";flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:10px;border-radius:50%;background:var(--sand);color:var(--ink);font-size:16px;font-weight:500;line-height:1;transition:transform .2s var(--ease-out),background-color .2s ease}
:is(.incl-places a,.jump-list a,.bundle-choose):active::after{transform:translateX(3px);background:var(--mint)}
:is(.bag-line-copy h2 a,.dest-animal-copy h3 a){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;text-decoration-color:rgba(38,38,38,.35)}
:is(.incl-col:not(.incl-places) li,.incl-list li)::before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--ink);font:700 13px/1 var(--sans)}
@media(hover:hover) and (pointer:fine){
 :is(.incl-places a,.jump-list a,.bundle-choose):hover::after{transform:translateX(3px);background:var(--mint)}
 :is(.bag-line-copy h2 a,.dest-animal-copy h3 a):hover{text-decoration-color:currentColor}
}
@media(prefers-reduced-motion:reduce){:is(.incl-places a,.jump-list a,.bundle-choose)::after{transition:none}}

/* Menu icon: three lines that fold into a cross while the menu is open (adapted from Uiverse.io by JulanDeAlb, MIT). */
.menu-icon{width:22px;height:22px;flex:none;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.menu-line{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.menu-line-outer{stroke-dasharray:12 63}
[aria-expanded="true"]>.menu-icon{transform:rotate(-45deg)}
[aria-expanded="true"]>.menu-icon .menu-line-outer{stroke-dasharray:20 300;stroke-dashoffset:-32.42}
@media(prefers-reduced-motion:reduce){.menu-icon,.menu-line{transition:none}}
:root[data-motion-paused="true"] :is(.menu-icon,.menu-line){transition:none}