/* Desktop hero trial (templates/hero-trial.php): #section-1[data-hero="a" | "b"] restyles the home
   hero around the same booking form. Desktop only (≥992px, where #section-1 is shown); "now" and
   anything below keep the current hero. */

.ht-layer,
.ht-copy { display: none; }

@media only screen and (min-width: 992px) {
  #section-1 {
    --ht-ink: #14272c;
    --ht-muted: #5c6a6e;
    --ht-orange: #f37720;
    --ht-green: #75a843;
    --ht-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ─── Shared: the scene replaces the illustration, the content flows from the top ─── */

  #section-1:is([data-hero="a"], [data-hero="b"]) {
    position: relative;
    height: auto;
    min-height: min(max(720px, calc(100vh - var(--ht-offset, 0px))), 1080px); /* SEO: tope para viewports altos (Googlebot) */
    max-height: none;
    padding: var(--ht-top, 0) 0 0;
    overflow: hidden;
  }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-canvas { display: none; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-copy { display: contents; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-content {
    position: relative;
    z-index: 2;
    top: auto;
    transform: none;
    height: auto;
    max-height: none;
    min-height: calc(min(max(720px, calc(100vh - var(--ht-offset, 0px))), 1080px) - var(--ht-top, 0px));
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
  }
  /* order of the pieces: kicker, H1, sub, Trustpilot, form, selling points */
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-kicker { order: 1; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-text { order: 2; margin: 0; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-sub { order: 3; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-trustpilot { order: 4; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form { order: 5; width: 100%; margin: 0; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-usps { order: 6; }
  #section-1[data-hero="a"] .ht-only-b,
  #section-1[data-hero="b"] .ht-only-a { display: none; }

  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-text :is(h1, .hero-home-h1) {
    margin: 0;
    font-family: "Bubblegum Sans", cursive;
    font-weight: 400;
    text-align: left;
    letter-spacing: -0.01em;
  }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-sub { margin: 20px 0 0; font-size: 20px; line-height: 1.5; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-trustpilot { margin: 24px 0 0; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 12px; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-trustpilot .tp-row { flex-shrink: 0; }

  /* the form: same fields and scripts, new frame; the old yellow selling points go (24/7 is only
     for emergencies) and the button sits next to or under the fields */
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .container { max-width: none; padding: 0; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .box .form-action .info { display: none; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .box form { margin: 0; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .box .form-row { margin: 0; }
  /* an open location list stays above the fields that follow it */
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form :is(.column, .form-group):has(.select2-container--open) { position: relative; z-index: 20; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .label-single { margin-bottom: 10px; font-size: 15px; font-weight: 600; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .btn-submit button {
    height: 52px;
    padding: 0 30px;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(243, 119, 32, 0.35);
    transition: transform 0.2s var(--ht-ease), box-shadow 0.2s;
  }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form .btn-submit button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(243, 119, 32, 0.45); }

  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-usps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-usps li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-usps li::before { content: none; }

  .ht-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

  /* entrance: the copy rises in, one piece after the other */
  #section-1:is([data-hero="a"], [data-hero="b"]) :is(.ht-kicker, .hero-text, .ht-sub, .hero-trustpilot, .hero-form, .ht-usps) {
    animation: ht-rise 0.9s var(--ht-ease) backwards;
  }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-text { animation-delay: 0.08s; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-sub { animation-delay: 0.16s; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-trustpilot { animation-delay: 0.24s; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .hero-form { animation-delay: 0.32s; }
  #section-1:is([data-hero="a"], [data-hero="b"]) .ht-usps { animation-delay: 0.4s; }

  /* ─── A · Northern lights night ───────────────────────────────── */

  #section-1[data-hero="a"] { background: #0c1630; }
  #section-1[data-hero="a"] .ht-a-scene { display: block; position: absolute; inset: var(--ht-top, 0) 0 0 0; z-index: 0; overflow: hidden; }
  .ht-a-photo {
    position: absolute;
    inset: 0;
    background: url(/assets/images/bg-terms.jpg) 50% 72% / cover no-repeat;
    animation: ht-settle 2.6s var(--ht-ease) both;
  }
  /* stars: three layers of dots at different sizes, twinkling out of step */
  .ht-a-stars,
  .ht-a-stars::before,
  .ht-a-stars::after {
    position: absolute;
    inset: 0 0 52% 0;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 44% 12%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 61% 33%, #fff 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 78% 8%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 90% 46%, #fff 50%, transparent 51%);
    background-size: 340px 260px;
  }
  .ht-a-stars { animation: ht-twinkle 4.5s ease-in-out infinite; }
  .ht-a-stars::before { content: ""; inset: 0; background-size: 520px 300px; background-position: 120px 40px; animation: ht-twinkle 6s ease-in-out 1.5s infinite; }
  .ht-a-stars::after { content: ""; inset: 0; background-size: 260px 210px; background-position: 60px 90px; opacity: 0.6; animation: ht-twinkle 3.6s ease-in-out 0.7s infinite; }
  /* living aurora: soft ribbons of light over the painted one, drifting and breathing */
  .ht-a-aurora { position: absolute; inset: 0 0 40% 0; mix-blend-mode: screen; }
  .ht-a-aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    opacity: 0.55;
    background: linear-gradient(90deg, transparent 0%, rgba(90, 255, 170, 0.7) 30%, rgba(70, 220, 255, 0.45) 65%, transparent 100%);
    animation: ht-aurora 16s ease-in-out infinite alternate;
  }
  .ht-a-aurora span:nth-child(1) { left: -10%; top: 6%; width: 75%; height: 26%; transform: rotate(-8deg); }
  .ht-a-aurora span:nth-child(2) { left: 35%; top: 22%; width: 70%; height: 22%; transform: rotate(10deg); animation-duration: 21s; animation-delay: -6s; background: linear-gradient(90deg, transparent, rgba(120, 255, 150, 0.6) 40%, rgba(170, 120, 255, 0.35) 80%, transparent); }
  .ht-a-aurora span:nth-child(3) { left: 55%; top: -4%; width: 40%; height: 40%; transform: rotate(32deg); animation-duration: 25s; animation-delay: -12s; opacity: 0.4; }
  /* legibility: night on the left (copy) and at the bottom (form), the scene stays clear in the middle */
  .ht-a-shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(7, 13, 32, 0.85) 0%, rgba(7, 13, 32, 0.55) 34%, rgba(7, 13, 32, 0) 62%),
      linear-gradient(0deg, rgba(7, 13, 32, 0.8) 0%, rgba(7, 13, 32, 0) 34%);
  }

  #section-1[data-hero="a"] .hero-content { padding: 56px 56px 40px; color: #fff; }
  #section-1[data-hero="a"] .ht-kicker { padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #c9ffe0; }
  .ht-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: #6dffb0; box-shadow: 0 0 0 0 rgba(109, 255, 176, 0.6); animation: ht-pulse 2.2s ease-out infinite; }
  #section-1[data-hero="a"] .hero-text :is(h1, .hero-home-h1) { max-width: 660px; color: #fff; font-size: 78px; line-height: 0.95; text-shadow: 0 6px 40px rgba(7, 13, 32, 0.5); }
  #section-1[data-hero="a"] .ht-sub { max-width: 540px; color: rgba(255, 255, 255, 0.82); }
  #section-1[data-hero="a"] .hero-trustpilot .tp-logo { filter: brightness(0) invert(1); }
  #section-1[data-hero="a"] .hero-trustpilot :is(.tp-score, .tp-text) { color: #fff; }
  /* the form: a glass bar along the bottom, fields and button on one line */
  #section-1[data-hero="a"] .hero-form { margin-top: auto; padding-top: 32px; }
  #section-1[data-hero="a"] .hero-form .box {
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 60px rgba(4, 8, 22, 0.35);
  }
  #section-1[data-hero="a"] .hero-form .box form { display: flex; align-items: flex-end; gap: 24px; }
  #section-1[data-hero="a"] .hero-form .box .form-row { flex: 1; min-width: 0; align-items: flex-end; }
  #section-1[data-hero="a"] .hero-form .box .form-row .separator-vertical { align-self: stretch; margin: 6px 0; background: rgba(255, 255, 255, 0.25); }
  #section-1[data-hero="a"] .hero-form .box .form-action { flex-shrink: 0; margin: 0; }
  #section-1[data-hero="a"] .hero-form .label-single { color: rgba(255, 255, 255, 0.85); }
  /* A: the selling points sit under Trustpilot, in the open sky above the bar */
  #section-1[data-hero="a"] .ht-usps { order: 5; margin-top: 22px; color: rgba(255, 255, 255, 0.85); }
  #section-1[data-hero="a"] .hero-form { order: 6; }
  #section-1[data-hero="a"] .ht-usps svg { color: #6dffb0; }

  /* ─── B · Editorial with a photo ──────────────────────────────── */

  #section-1[data-hero="b"] { background: #fbf6ee; }
  #section-1[data-hero="b"] .ht-b-scene { display: block; position: absolute; inset: var(--ht-top, 0) 0 0 0; z-index: 0; }
  .ht-b-topo { position: absolute; top: -12%; right: -14%; width: 72%; height: 124%; fill: none; stroke: #ecdfca; stroke-width: 1.3; }
  .ht-b-arch {
    position: absolute;
    top: 44px;
    right: 56px;
    bottom: 48px;
    width: 41%;
    margin: 0;
    overflow: hidden;
    border-radius: 999px 999px 36px 36px;
    box-shadow: 0 40px 80px rgba(70, 48, 20, 0.18);
    animation: ht-arch 1.4s var(--ht-ease) both;
  }
  .ht-b-arch img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 58% 50%; animation: ht-settle 2.6s var(--ht-ease) both; }
  .ht-b-polaroid {
    position: absolute;
    right: calc(56px + 41% - 120px);
    bottom: 70px;
    width: 250px;
    margin: 0;
    padding: 10px 10px 0;
    background: #fff;
    box-shadow: 0 24px 50px rgba(70, 48, 20, 0.22);
    transform: rotate(-7deg);
    animation: ht-drop 1.1s var(--ht-ease) 0.7s backwards;
  }
  .ht-b-polaroid img { width: 100%; height: 230px; display: block; object-fit: cover; object-position: 50% 40%; }
  .ht-b-polaroid figcaption { padding: 10px 0 14px; font-family: "Bubblegum Sans", cursive; font-size: 22px; text-align: center; color: var(--ht-ink); }
  .ht-b-note {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(70, 48, 20, 0.16);
    font-size: 16px;
    font-weight: 700;
    color: var(--ht-ink);
    white-space: nowrap;
    animation: ht-pop 0.8s var(--ht-ease) backwards, ht-float 6s ease-in-out infinite;
  }
  .ht-b-note svg { padding: 3px; border-radius: 50%; background: var(--ht-green); color: #fff; }
  .ht-b-note--1 { top: 18%; right: calc(56px + 41% - 90px); animation-delay: 1s, 1.8s; }
  .ht-b-note--2 { top: 52%; right: 22px; animation-delay: 1.2s, 0s; animation-duration: 0.8s, 7s; }
  .ht-b-route {
    position: absolute;
    right: calc(56px + 41% - 40px);
    top: calc(18% + 54px);
    width: 120px;
    height: 90px;
    fill: none;
    stroke: var(--ht-orange);
    stroke-width: 2.5;
    stroke-dasharray: 6 8;
    stroke-linecap: round;
    opacity: 0.7;
  }

  #section-1[data-hero="b"] .hero-content { width: 50%; padding: 44px 0 44px 56px; color: var(--ht-ink); }
  #section-1[data-hero="b"] .ht-kicker { color: #c25e14; }
  #section-1[data-hero="b"] .ht-kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
  #section-1[data-hero="b"] .hero-text :is(h1, .hero-home-h1) { max-width: 600px; color: var(--ht-ink); font-size: 64px; line-height: 0.98; }
  #section-1[data-hero="b"] .ht-sub { max-width: 540px; margin-top: 16px; color: var(--ht-muted); font-size: 18px; }
  #section-1[data-hero="b"] .ht-kicker { margin-bottom: 14px; }
  #section-1[data-hero="b"] .hero-trustpilot { margin-top: 16px; transform-origin: left center; }
  #section-1[data-hero="b"] .hero-trustpilot :is(.tp-text) { font-size: 17px; }
  /* the form: a white card, pick-up over drop-off, the button across the bottom */
  #section-1[data-hero="b"] .hero-form { max-width: 620px; margin-top: 24px; }
  #section-1[data-hero="b"] .hero-form .box {
    padding: 22px 24px;
    border: 1px solid #efe4d2;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 60px rgba(70, 48, 20, 0.12);
  }
  #section-1[data-hero="b"] .hero-form .box form { display: flex; flex-direction: column; gap: 16px; }
  #section-1[data-hero="b"] .hero-form .box .form-row { flex-direction: column; gap: 10px; }
  #section-1[data-hero="b"] .hero-form .label-single { margin-bottom: 6px; }
  #section-1[data-hero="b"] .hero-form .box .form-row .column { width: 100%; }
  #section-1[data-hero="b"] .hero-form .box .form-row .separator-vertical { display: none; }
  #section-1[data-hero="b"] .hero-form .label-single { color: var(--ht-ink); }
  #section-1[data-hero="b"] .hero-form :is(input, .select2-container .select2-selection--single) { background-color: #f6f8f8; border: 1px solid #dde5e7; }
  #section-1[data-hero="b"] .hero-form .box .form-action { margin: 0; }
  #section-1[data-hero="b"] .hero-form .btn-submit { width: 100%; }
  #section-1[data-hero="b"] .hero-form .btn-submit button { width: 100%; height: 54px; font-size: 19px; }
  #section-1[data-hero="b"] .ht-usps { max-width: 620px; gap: 8px 20px; color: var(--ht-ink); }
  #section-1[data-hero="b"] .ht-usps li { font-size: 15px; }
  #section-1[data-hero="b"] .ht-usps svg { color: var(--ht-green); }
}

@keyframes ht-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes ht-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ht-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ht-aurora {
  0% { translate: 0 0; scale: 1 1; opacity: 0.35; }
  50% { opacity: 0.6; }
  100% { translate: 8% -6%; scale: 1.15 1.35; opacity: 0.45; }
}
@keyframes ht-pulse { 0% { box-shadow: 0 0 0 0 rgba(109, 255, 176, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(109, 255, 176, 0); } }
@keyframes ht-arch { from { clip-path: inset(100% 0 0 0 round 999px 999px 36px 36px); } to { clip-path: inset(0 0 0 0 round 999px 999px 36px 36px); } }
@keyframes ht-drop { from { opacity: 0; transform: translateY(-40px) rotate(4deg); } }
@keyframes ht-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ht-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

@media (prefers-reduced-motion: reduce) {
  #section-1:is([data-hero="a"], [data-hero="b"]) *,
  #section-1:is([data-hero="a"], [data-hero="b"]) *::before,
  #section-1:is([data-hero="a"], [data-hero="b"]) *::after { animation: none !important; }
}