/* Homepage discovery and search. Temporary component sheet. */
#home .home-search { --search-fade: 5rem; --search-gap: 1.5rem; --search-inset: calc(var(--search-fade) + var(--search-gap)); position: relative; padding: calc(var(--search-inset) + 4rem) 0; isolation: isolate; overflow: hidden; }
/* The homepage layer reaches zero before the local sticker canvas begins.
   The gap also separates their fades at the bottom, regardless of image rotation. */
.home-search .dpath__shield { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--background) var(--search-fade), var(--background) calc(100% - var(--search-fade)), transparent); }
/* Match the prototype's visual fade on its original section-sized canvas.
   The larger shield alone hides homepage stickers beyond that canvas. */
.home-search .dpath__panel { position: absolute; inset: var(--search-inset) 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--tru-navy), transparent); }
.home-search .dpath__stickers { position: absolute; inset: var(--search-inset) 0; z-index: 2; pointer-events: none; user-select: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.home-search .dpath__sticker { position: absolute; filter: brightness(0) invert(1); }
.home-search .dpath__sticker--tru-logo { top: 1rem; left: 1.5rem; width: 6rem; transform: rotate(-12deg); opacity: 0.12; }
.home-search .dpath__sticker--mask { top: 1rem; right: 1.5rem; width: 6rem; transform: rotate(14deg); opacity: 0.12; }
.home-search .dpath__sticker--komodo { display: none; top: 1rem; right: -2rem; width: 9rem; transform: rotate(10deg); opacity: 0.10; }
.home-search .dpath__sticker--lantern { top: 50%; margin-top: -2rem; left: -1.5rem; width: 4rem; transform: rotate(-14deg); opacity: 0.12; }
.home-search .dpath__sticker--peru-bird { top: 50%; margin-top: -2.5rem; right: -1.5rem; width: 5rem; transform: rotate(20deg); opacity: 0.12; }
.home-search .dpath__sticker--bali-flower { display: none; top: 28%; left: 18%; width: 7rem; transform: rotate(-6deg); opacity: 0.10; }
.home-search .dpath__sticker--eyes { display: none; top: 50%; margin-top: -2rem; right: 12%; width: 6rem; transform: rotate(8deg); opacity: 0.10; }
.home-search .dpath__sticker--ramen { bottom: -1rem; left: 2rem; width: 5rem; transform: rotate(-8deg); opacity: 0.12; }
.home-search .dpath__sticker--good-vibes { display: none; bottom: -1.5rem; right: 2rem; width: 8rem; transform: rotate(12deg); opacity: 0.10; }
.home-search .dpath__sticker--brazil { display: none; bottom: -2rem; left: 16%; width: 8rem; transform: rotate(-10deg); opacity: 0.10; }
.home-search .dpath__sticker--community { display: none; bottom: -1rem; right: 50%; transform: translateX(50%) rotate(6deg); width: 8rem; opacity: 0.10; }
.home-search .dpath__sticker--sun { bottom: 0.5rem; right: -1rem; width: 3.5rem; transform: rotate(-8deg); opacity: 0.14; }
.home-search .dpath__inner { position: relative; z-index: 3; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.home-search .dpath__head { text-align: center; margin-bottom: 2.5rem; }
.home-search .dpath__eyebrow { color: var(--tru-pink); font: 700 0.75rem 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.3em; margin: 0 0 0.75rem; }
.home-search .dpath__title { color: #fff; font: 900 1.875rem/0.95 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: -0.025em; margin: 0; }
.home-search .dpath__title span { color: var(--tru-pink); }
.home-search .dpath__sub { color: #d1d5db; font: 400 1rem/1.5 'Caveat', cursive; margin: 1rem 0 0; }
.home-search .search-prompt { max-width: 48rem; margin: 0 auto 2rem; }
.home-search .search-prompt__btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; border-radius: var(--radius); border: 1px solid #fff; background: var(--tru-navy); padding: 0.875rem 1rem; color: #fff; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; transition: border-color 0.2s; }
.home-search .search-prompt__btn:hover { border-color: var(--tru-pink); }
.home-search .search-prompt__btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.home-search .dpath__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.home-search .dpath__btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--tru-navy); padding: 0.75rem 1rem; cursor: pointer; text-decoration: none; transition: border-color 0.3s, background 0.3s; }
.home-search .dpath__btn-label { font: 600 11px/1.4 'Montserrat', Arial, sans-serif; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.home-search .dpath__btn-ico { width: 1rem; height: 1rem; flex-shrink: 0; }
.home-search .dpath__btn-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tru-green); flex-shrink: 0; animation: dpath-pulse 2s infinite; }
.home-search .dpath__btn--green:hover, .home-path-dialog .dmodal__row--green:hover { border-color: rgba(107,212,149,0.4); background: rgba(107,212,149,0.1); }
.home-search .dpath__btn--pink:hover, .home-path-dialog .dmodal__row--pink:hover { border-color: rgba(255,63,153,0.4); background: rgba(255,63,153,0.1); }
.home-search .dpath__btn--blue:hover, .home-path-dialog .dmodal__row--blue:hover { border-color: rgba(33,114,213,0.4); background: rgba(33,114,213,0.1); }
.home-search .dpath__btn--white:hover { background: rgba(255,255,255,0.1); }
.home-search .dpath__btn--pink .dpath__btn-ico { color: var(--tru-pink); }
.home-search .dpath__btn--blue .dpath__btn-ico { color: var(--tru-blue); }
.home-search .dpath__btn--white .dpath__btn-ico { color: #9ca3af; }
.home-search button:focus-visible, .home-search a:focus-visible, .home-search-dialog button:focus-visible, .home-search-dialog a:focus-visible, .home-path-dialog button:focus-visible, .home-path-dialog a:focus-visible { outline: 2px solid var(--tru-pink); outline-offset: 3px; }

/* Native dialogs provide focus containment, Escape and the modal backdrop. */
#hero.home-search-dialog, .home-path-dialog { box-sizing: border-box; position: fixed; inset: 0; width: calc(100% - 2rem); max-width: 28rem; height: auto; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; color: #fff; background: var(--tru-navy); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow-y: auto; }
#hero.home-search-dialog { inset: 5rem 0 auto; max-width: 36rem; max-height: calc(100dvh - 6rem); background: transparent; border: 0; overflow: visible; }
.home-path-dialog { height: fit-content; }
.home-search-dialog::backdrop, .home-path-dialog::backdrop { background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); }
.home-search-dialog__form { margin: 0; }
.home-search-dialog .home-search-dialog__field { position: relative; }
.home-search-dialog__field > svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: #9ca3af; pointer-events: none; }
.home-search-dialog #search-text-box { display: block; box-sizing: border-box; width: 100%; height: auto; margin: 0; background: var(--tru-navy); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 1rem 3rem; color: #fff; font: inherit; font-size: 0.875rem; }
.home-search-dialog #search-text-box::placeholder { color: #9ca3af; opacity: 1; }
.home-search-dialog #search-text-box:focus { outline: none; border-color: var(--tru-pink); box-shadow: 0 0 0 1px var(--tru-pink); }
.home-search-dialog #search-text-box::-webkit-search-cancel-button { display: none; }
.home-search-dialog__close { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); padding: 0.375rem; color: #9ca3af; background: none; border: 0; cursor: pointer; line-height: 0; }
.home-search-dialog__close svg, .home-path-dialog .dmodal__close svg { width: 1.25rem; height: 1.25rem; }
.home-search-dialog__hint { margin-top: 0.5rem; padding: 1rem; background: var(--tru-navy); border: 1px solid var(--border-soft); border-radius: 10px; color: #9ca3af; font-size: 0.75rem; }
.home-search-dialog #autocomplete_item { position: static; width: 100%; margin-top: 0.5rem; background: var(--tru-navy); border: 1px solid var(--border-soft); border-radius: 10px; max-height: min(55dvh, 28rem); overflow: auto; }
.home-search-dialog #autocomplete_item:not([style*="visible"]) { display: none; }
.home-search-dialog .results_scrollbar { max-height: none; overflow: visible; }
.home-search-dialog .results_scrollbar > .heading { font: 700 10px/1.5 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; color: var(--tru-pink); padding: 0.75rem 1rem 0.375rem; margin: 0; border-top: 1px solid var(--border-soft); }
.home-search-dialog .results_scrollbar > .heading:first-child { border-top: 0; }
.home-search-dialog .search_result { display: block; padding: 0; }
.home-search-dialog .search_result br { display: none; }
.home-search-dialog .search_redirect_link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: #fff; font-size: 0.875rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.home-search-dialog .search_redirect_link::after { content: '›'; margin-left: auto; color: #9ca3af; font-size: 1.25rem; }
.home-search-dialog .search_redirect_link:hover { background: rgba(255,255,255,0.05); }
.home-search-dialog .no_search_results { display: block; padding: 1.5rem 1rem; text-align: center; color: #9ca3af; font-size: 0.875rem; }
.home-path-dialog .dmodal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-soft); }
.home-path-dialog .dmodal__eyebrow { font: 700 10px/1.5 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; margin: 0; }
.home-path-dialog .dmodal__eyebrow--green { color: var(--tru-green); }
.home-path-dialog .dmodal__eyebrow--pink { color: var(--tru-pink); }
.home-path-dialog .dmodal__eyebrow--blue { color: var(--tru-blue); }
.home-path-dialog .dmodal__title { color: #fff; font: 700 0.875rem/1.5 'Montserrat', Arial, sans-serif; text-transform: uppercase; margin: 0; }
.home-path-dialog .dmodal__close { flex-shrink: 0; color: #9ca3af; background: none; border: 0; cursor: pointer; padding: 0.375rem; display: flex; }
.home-path-dialog .dmodal__close:hover, .home-search-dialog__close:hover { color: #fff; }
.home-path-dialog .dmodal__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.home-path-dialog .dmodal__intro { color: #9ca3af; font-size: 0.75rem; line-height: 1.5; padding: 0 0.5rem; margin: 0 0 0.5rem; }
.home-path-dialog .dmodal__row { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--tru-navy); padding: 0.75rem 1rem; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.home-path-dialog .dmodal__row-emoji { font-size: 1.125rem; line-height: 1.5; flex-shrink: 0; }
.home-path-dialog .dmodal__row-logo { height: 4rem; width: 4rem; object-fit: contain; flex-shrink: 0; }
.home-path-dialog .dmodal__row-main { flex: 1; min-width: 0; }
.home-path-dialog .dmodal__row-label { display: block; color: #fff; font: 600 0.875rem/1.4 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
.home-path-dialog .dmodal__row-desc { display: block; color: #9ca3af; font-size: 0.75rem; line-height: 1.375; margin-top: 0.125rem; }
.home-path-dialog .dmodal__row-arrow { width: 1rem; height: 1rem; color: #9ca3af; flex-shrink: 0; margin-left: auto; }
@media (min-width: 640px) {
  #home .home-search { --search-fade: 6rem; --search-gap: 2rem; padding: calc(var(--search-inset) + 5rem) 0; }
  .home-search .dpath__sticker--tru-logo, .home-search .dpath__sticker--mask { top: 2rem; width: 8rem; }
  .home-search .dpath__sticker--tru-logo { left: 25%; }
  .home-search .dpath__sticker--mask { right: 25%; }
  .home-search .dpath__sticker--komodo, .home-search .dpath__sticker--good-vibes { display: block; }
  .home-search .dpath__sticker--lantern { left: -0.5rem; width: 6rem; }
  .home-search .dpath__sticker--peru-bird { right: -0.5rem; width: 7rem; }
  .home-search .dpath__sticker--ramen { left: 25%; width: 7rem; }
  .home-search .dpath__sticker--sun { right: 0.5rem; width: 5rem; }
  .home-search .dpath__inner { padding-inline: 1.5rem; }
  .home-search .dpath__title { font-size: 2.25rem; }
  .home-search .dpath__sub { font-size: 1.125rem; }
  .home-search .search-prompt__btn { padding: 1rem; }
  #hero.home-search-dialog { top: 7rem; max-height: calc(100dvh - 8rem); }
}
@media (min-width: 768px) {
  .home-search .dpath__sticker--eyes, .home-search .dpath__sticker--community { display: block; }
}
@media (min-width: 1024px) {
  .home-search .dpath__sticker--tru-logo { left: 33.33%; width: 10rem; }
  .home-search .dpath__sticker--mask { right: 33.33%; width: 10rem; }
  .home-search .dpath__sticker--komodo { right: 2.5rem; width: 13rem; }
  .home-search .dpath__sticker--lantern { left: 1.5rem; width: 8rem; }
  .home-search .dpath__sticker--peru-bird { right: 1.5rem; width: 9rem; }
  .home-search .dpath__sticker--bali-flower, .home-search .dpath__sticker--brazil { display: block; }
  .home-search .dpath__sticker--eyes { top: 28%; right: 18%; margin-top: 0; width: 8rem; }
  .home-search .dpath__sticker--ramen { left: 33.33%; width: 9rem; }
  .home-search .dpath__sticker--good-vibes { right: 25%; width: 11rem; }
  .home-search .dpath__sticker--community { display: none; }
  .home-search .dpath__sticker--sun { right: 1rem; width: 6rem; }
  .home-search .dpath__inner { padding-inline: 2rem; }
  .home-search .dpath__title { font-size: 3rem; }
  .home-search .dpath__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 540px) {
  #hero.home-search-dialog { top: 1rem; max-height: calc(100dvh - 2rem); }
  .home-search-dialog #autocomplete_item { max-height: calc(100dvh - 9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-search .dpath__btn-dot { animation: none; }
}