/* hulk-pages.css - the utilities Teddy's compiled bundle never emitted.
 *
 * The site ships teddybearmoving.com's compiled Tailwind (MainLayout.DeqD4HXa
 * .css). There is no Tailwind compiler in this repo, so any utility Teddy's
 * source never used simply does not exist and fails silently. This file is the
 * supplement: every class below is used by a Hulk page and is absent from that
 * bundle. Values are copied from Teddy's newer build (MainLayout.CV1zaho-.css)
 * where an equivalent exists, so the two sheets cannot disagree.
 *
 * scripts/check_classes.py reads public/_astro/*.css, so anything added here
 * counts as shipped. Keep it minimal: if a class can be avoided, avoid it.
 */

/* ---- fixes for classes the homepage already used but never had ---- */
.bg-black\/50 { background-color: #00000080 }
.via-black\/25 {
  --tw-gradient-via: #00000040;
  --tw-gradient-via-stops: var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops)
}
.shadow-\[0_16px_30px_rgba\(0\,0\,0\,0\.18\)\] {
  --tw-shadow: 0 16px 30px #0000002e;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
/* build.py recolours the text selection from Teddy's amber to Hulk green.
   The compiled sheet only ever emitted the amber variant. */
.selection\:bg-green-300 ::selection { background-color: #86efac }
.selection\:bg-green-300::selection { background-color: #86efac }

/* ---- subpage layout ---- */
@media (min-width: 64rem) {
  .lg\:min-h-105 { min-height: calc(var(--spacing) * 105) }
  .lg\:self-stretch { align-self: stretch }
}
.min-w-64 { min-width: calc(var(--spacing) * 64) }

/* Page-banner content has to clear the header itself.
 *
 * #site-header is fixed and transparent, so it takes no space in flow, and the
 * banner is `flex items-end` with a min-height. On a phone the banner's
 * min-height (min-h-85, 340px) minus the content stack left the breadcrumb and
 * eyebrow sitting at y=46 - underneath a header whose logo occupies 47-107.
 * Teddy's banner never hit this because it carries neither a breadcrumb nor a
 * call button that stacks below the heading on narrow screens.
 *
 * Padding on the content wrapper rather than a taller min-height on the
 * section: it holds for any length of heading, since the wrapper grows and the
 * section grows with it, and it costs nothing on wide screens where the
 * bottom-aligned content already sits well clear.
 *
 * Measured header height (util bar + nav, un-scrolled, which is the tallest
 * state and the only one without JS): 117px below lg, 125px at lg and up.
 */
.banner-safe { padding-top: 132px }
@media (min-width: 64rem) { .banner-safe { padding-top: 144px } }

/* Banner scrim, in two layers.
 *
 * Teddy's is one gradient on the section: black/75 at the bottom, black/35 at
 * the midpoint. Clearing the header pushed the text off the dark bottom and
 * into that weak midpoint, and these photos are San Diego exteriors in midday
 * sun - the packing banner has a blown-out white wall right behind the
 * headline. Sampled with the gradient composited over the actual pixels, the
 * breadcrumb was at 2.7:1 and the h1 at 3.0:1.
 *
 * So: the section keeps a gradient, and the content wrapper carries a second
 * one anchored to the text box, fading out above it. Darkening only the band
 * the text occupies is what keeps the photo from turning into a grey rectangle
 * - a single scrim heavy enough to fix 11px type would cost the whole image.
 */
.banner-scrim {
  background-image: linear-gradient(to top,
    #000000d9 0%, #00000080 55%, #00000073 100%)
}
.banner-safe {
  background-image: linear-gradient(to top,
    #00000094 0%, #0000008c 70%, #0000 100%)
}
/* Teddy only ever wrote the group-hover variants of these two. */
.hover\:bg-white:hover { background-color: #fff }
.rotate-180 { rotate: 180deg }
.object-center { object-position: center }

/* ---- motion (all of it opt-out under prefers-reduced-motion) ---- */
:root {
  --motion-fast: .16s;
  --motion-ease: cubic-bezier(.2, .7, .2, 1)
}
/* Slow drift on the page banner photo. Teddy's value, unchanged. */
.ken-burns { animation: 24s ease-in-out infinite alternate ken-burns }
@keyframes ken-burns {
  0% { transform: scale(1) }
  to { transform: scale(1.07) }
}
.press { transition: transform var(--motion-fast) var(--motion-ease) }
.press:active { transform: scale(.975) }

/* FAQ disclosure: the plus turns into a minus when the panel opens.
   <details>/<summary> does the work; this is the only rule it needs. */
.faq-icon-svg { transition: transform .2s ease }
details[open] > summary .faq-icon-svg { transform: rotate(45deg) }

@media (prefers-reduced-motion: reduce) {
  .ken-burns { animation: none !important }
  .press, .faq-icon-svg { transition: none }
}