/* #*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* hero-carousel.css *#*#*#*#*#*#*#*#*#*#*#*#*#* (C) 2025 DekTec */
/*                                                                                                          */
/* Stylesheet for a responsive, JavaScript-enhanced image carousel with support for fade transitions,       */
/* navigation buttons, dot indicators, and theme variants (light and dark).                                 */
/*                                                                                                          */
/* The layout adapts seamlessly between desktop and mobile viewports, supporting two main use cases:        */
/*                                                                                                          */
/* JavaScript (InitCarousel) controls the behavior: transitions, vertical centering, dot state, and         */
/* automatic slide progression.                                                                             */
/*                                                                                                          */
/* Carousels are populated dynamically using <script type="application/json"> tags embedded in the HTML.    */
/* These JSON blocks (with IDs such as 'hero-scenes' and 'arrivals-scenes') define the content of each      */
/* slide: title, description, image URL, and an optional image offset.                                      */
/*                                                                                                          */
/* =+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ */

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Constants -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

:root {
  /* Desktop defaults */
  --hero-stack-h:28.5rem;
  --icon-gap:2.5rem;
  --icon-size:2rem;
  --icon-strip-height:4rem;

  --slide-duration:0.6s;            /* Default slide transition time. */
  --slide-ease: ease-in-out;        /* For tweaking the slide easing. */
  --slide-edge-fade:60px;           /* Edge feathering width for scene slides. */
  --rotating-text-delay:800ms;
}

/* --- Mobile Portrait --- */
@media (max-width:859.98px) and (orientation:portrait)
{
  :root {
    --slide-duration:0.3s;
    --slide-edge-fade:16px;
  }
}

/* --- Constants - Mobile landscape --- */
@media (max-width:859.98px) and (orientation:landscape) {
}

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.- Common for Mobile Portrait/Landscape, Desktop -.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

/* Frame for the whole hero area. Provides the positioning context for overlay UI                           */
/* (prev/next buttons + dots) and stretches to fill the available height.                                   */
.hero-carousel {height:100%; position:relative; width:100%}

/* Slide stack container.                                                                                   */
/* Holds multiple hero-slide-wrapper elements (current + next) and controls slide transitions.              */
/* Fixed height based on --hero-stack-h, with overflow hidden to mask sliding content at the edges.         */
/* JS applies .is-dragging during swipe/drag interactions to update cursor and disable selection.           */
.hero-slide-stack {height:var(--hero-stack-h); mask-image:none; overflow:hidden; position:relative;
                   touch-action:pan-y; transform:translateZ(0); width:100%}
.hero-slide-stack.is-dragging {cursor:grabbing; user-select:none}
.hero-slide-stack a, .hero-slide-stack img {-webkit-user-drag:none}
/* Soft feather on both sides of the visible window. */
.hero-slide-stack.is-masked {
            mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) var(--slide-edge-fade),
                                       rgba(0,0,0,1) calc(100% - var(--slide-edge-fade)), rgba(0,0,0,0) 100%)}

/* Grid that lays out ONE slide’s content (title, image, rotating text, CTA).                               */
/* This grid does NOT move during transitions; only wrappers slide.                                         */
.hero-slide {display:grid; height:100%; width:100%}

/* Main title area for a slide (placed via grid-area:title).                                                */
/* Hidden state is used for soft fade/blur during cross-fade.                                               */
.hero__item-title {grid-area:title; opacity:1}
.hero__item-title.hidden {opacity:0}
.hero__item-title a.hero__title-link, .hero__rotating-text a.Rtxt {color:inherit; text-decoration:none}
.hero__item-title a.hero__title-link:hover,
.hero__item-title a.hero__title-link:visited, .hero__rotating-text a.Rtxt:visited {color:inherit}

/* Container for rotating text (grid-area:rota).                                                            */
/* Sits above other content when needed (z-index).                                                          */
.hero__item-rotating {grid-area:rota; z-index:3}

/* Rotating text stack: positions each text line absolutely and fades/slides them.                          */
/* JS toggles .active/.exiting to animate in/out.                                                           */
.hero__rotating-text {opacity:1; position:relative}
.hero__rotating-text p {width:100%; left:0; margin:0; position:absolute; opacity:0;
                        transform:translateY(-1.5rem); transition:opacity 0.6s ease, transform 0.6s ease}
.hero__rotating-text p.active {opacity:1; transform:translateY(0); z-index:1}
.hero__rotating-text p.exiting {opacity:0; transform: translateY(1.5rem); z-index:0}
.hero__rotating-text.hidden {opacity:0}
/* Prevent underline/color changes on hover to keep it calm. */
.hero__rotating-text a.Rtxt:hover {color:inherit; text-decoration:none}
/* Make each text line shrink-wrap so progress aligns to the text width. */
.hero__rotating-text p > .Rtxt {display:inline-block}

/* Visual container for the hero image area (grid-area:image).                                              */
/* Hosts the absolute-positioned crossfading image stack.                                                   */
.hero__item-image {grid-area:image; min-height:0; position:relative; width:100%}

/* Row of spec/feature icons overlaid on the slide image.                                                   */
/* Hidden by default; displayed at specific breakpoints.                                                    */
.hero__icon-strip {align-items:flex-end; display:flex; gap:var(--icon-gap); 
                   inset-inline:0; padding:0 4rem; position:absolute}
.hero__icon-strip .hero__icon-wrap img.narrow + .hero__icon-info {max-width:20rem}
.hero__icon-strip.hidden {opacity:0}
/* Optional glow effect for highlighted icons. */
.hero__icon-strip img.glow {filter: drop-shadow(0 0 2px white)}
/* Wrapper to anchor icon-specific tooltips. */
.hero__icon-wrap {position:relative}
.hero__icon-wrap img {display:block}

/* Grid slot for the CTA area (e.g., Learn more button).                                                    */
.hero__item-learn-more {grid-area:learn}

/* Caption labels over the image (e.g., product callouts).                                                  */
/* Absolutely positioned via JS per scene metadata.                                                         */
.hero__item-caption {color:white; font-weight:300; max-width:none; opacity:1; 
                     position:absolute; width:auto; white-space:nowrap; z-index:2}
.hero__item-caption.hidden {opacity:0}
.hero__item-caption.visible {filter:none; opacity:1}
/* Make the whole caption anchor clickable without changing underline by default. */
.hero__captions > a {pointer-events:auto; text-decoration:none}
.hero__captions > a:hover .hero__item-caption {text-decoration:underline}

/* Primary CTA styling (pill button over the hero image/text). */
.hero__item-link {padding:0.3rem 1.8rem 0.35rem 1.8rem; background-color:transparent;
                  border:0.06rem solid white; border-radius:1.3rem; color:var(--color-dektec-aqua);
                  font-size:1.4rem; font-weight:600; opacity:1; text-decoration:none}
.hero__item-link.hidden {opacity:0}
.hero__item-link:hover {background-color:black; color:white}

/* Icon tooltip bubble anchored to an individual icon. */
.hero__icon-info {background:var(--color-section-bg); border:1px solid #007CC3; border-radius:.6rem; 
                  bottom:calc(100% + 1.0rem); color:var(--color-dark-blue); font-size:1rem; left:50%;
                  line-height:1.6; max-width:36rem; opacity:0; padding:.7rem 1rem; pointer-events:auto; 
                  position:absolute; text-align:left; transform:translateX(-2rem); 
                  transition:opacity .25s ease; visibility:hidden; white-space:pre-line; width:max-content; 
                  z-index:10}
.hero__icon-info.visible {opacity:1; visibility:visible}
/* Arrow. This is an old CSS trick to create a triangle (arrow) using borders                               */
/* All borders are transparent except the top one, forming a downward-pointing arrow.                       */
.hero__icon-info::before {border:.5rem solid transparent; border-top-color:var(--color-section-bg); 
                          content:""; left:2rem; position:absolute; top:100%; transform:translateX(-50%)}

/* Shared fade/blur transitions applied to hero elements during slide changes. */
.hero__icon-strip.hidden, .hero__item-title.hidden, .hero__item-caption.hidden,
.hero__item-link.hidden, .hero__rotating-text.hidden {filter:blur(4px)}

.hero__icon-strip, .hero__item-title,.hero__item-caption, .hero__item-link, .hero__rotating-text
{transition:opacity var(--fade-duration) ease}

/* When we actually blur during the fade path, animate filter too */
.hero__icon-strip.hidden, .hero__item-title.hidden, .hero__item-caption.hidden,
.hero__item-link.hidden, .hero__rotating-text.hidden{
 transition:opacity var(--fade-duration) ease, filter var(--fade-duration) ease}

/* -.-.-.-.-.-.-.-.-.- Desktop layout (md+xl): two-column grid with image on the right -.-.-.-.-.-.-.-.-.-. */

@media (min-width:860px)
{
  .hero-slide {align-content:start; align-items:start; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
               grid-template-areas:"title image" "rota image" "learn image" ". image"; 
               grid-template-rows:max-content max-content max-content 1fr;
               padding:1rem 4rem 1rem 4rem; row-gap:3.5em}
  .hero-slide > * {min-width:0}

  .hero__icon-strip {bottom:1.5rem; display:flex}
  .hero__item-caption {font-size:1rem}
  .hero__item-image {height:26rem}
  .hero__item-rotating {margin:0 -5rem 1rem 0; font-size:1.6rem; font-weight:400}
  .hero__item-title {margin:1rem -5rem 0 0; font-size:2.6rem; font-weight:400; line-height:1.2}
  .hero__item-title .subtitle {font-size:1.75rem}
  .hero__rotating-text {height:1.5em; line-height:1.5}
  .hero__rotating-text p {font-size:inherit; font-weight:inherit}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Portrait -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

@media (max-width:859.98px) and (orientation:portrait)
{
  :root {
    --icon-gap:1.1rem;
    --icon-size:1.3rem;
    --icon-strip-height:4rem}

  #hero > .panel {padding-bottom:3vh; padding-top:0.9rem}
  .hero-carousel {display:grid; grid-template-rows:1fr auto; row-gap:0}
  .hero-slide-stack {height:100%}
  .hero-slide {justify-items:center; align-content:space-between;
               grid-template-columns:1fr; grid-auto-rows:min-content;
               grid-template-areas:"title" "image" "rota" "learn"; padding-bottom:8vh}

/*  .hero__icon-strip {align-items:center; bottom:0; gap:var(--icon-gap); inset-inline:0;
                     justify-content:center; padding:0}
*/
  .hero__icon-strip {display:none}
  .hero__item-title, .hero__item-rotating {text-align:center}
  .hero__item-title {font-size:1.8rem; font-weight:500; text-align:center}
  .hero__item-title .subtitle {font-size:1.3rem}
  .hero__item-rotating {margin-bottom:1vh}  /*font-size:clamp(0.625rem, 4.1vw, 1.875rem*/
  .hero__rotating-text {min-height:2em; min-width:20em}
  .hero__rotating-text p {font-size:1.2rem; font-weight:400}
  .hero__item-image {width:70%; max-width:31.25rem; height:52vw; max-height:25.25rem; margin-inline:auto}
  .hero__item-caption {font-size:0.7rem}
  .hero__item-link {background-color:transparent; border-radius:1rem; color:var(--color-dektec-aqua); 
                    font-size:0.9rem; padding:0.3rem 1.2rem 0.3rem 1.2rem;
                    -webkit-tap-highlight-color:transparent}
  .hero__item-link:hover {background-color:rgba(255, 255, 255, 0.1); color:white}
  .hero__item-link:active {background-color:rgba(255, 255, 255, 0.15); color:white}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Landscape -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

@media (max-width:859.98px) and (orientation:landscape)
{
  /* The panel defines the total height of the hero band. Inner elements use height:100%, so their size     */
  /* is computed relative to the panel’s height. This makes the panel the single source of truth.           */
  #hero > section.full-height .panel.full-height {height:clamp(10rem, 100svh, 20rem)}

  /* Grid wrapper for the hero; stretches to panel height and hosts slide stack + UI (dots, buttons).       */
  #hero .hero-carousel {display:grid; grid-template-rows:1fr auto; height:100%}
  
  /* Fills the panel’s height; acts as the viewport for slide transitions. */
  .hero-slide-stack {height:100%; min-height:0}
 
  .hero-slide {align-content:space-around;
               grid-template-areas:"title image" "rota image" "learn image";
               grid-template-columns:1.6fr 1fr;
               height:100%; padding:0rem 3rem}

  .hero__icon-strip {display:none}
  .hero__item-caption {font-size:0.7rem}
  .hero__item-image {height:100%; max-height:100%}
  .hero__item-learn-more {margin-bottom:0.3rem}
  .hero__item-link {font-size:0.7rem; padding:0.3rem 1.2rem 0.3rem 1.2rem; border-radius:1rem}
  .hero__item-rotating {margin:-1rem 0 0 0; font-size:1.0rem; font-weight:300}
  .hero__item-title {margin:0 -2rem 0 0; font-size:1.4rem; font-weight:400; line-height:1.25}
  .hero__item-title .subtitle {font-size:1.2rem}
  .hero__rotating-text {height:1.5rem}
  .hero__rotating-text p {font-size:inherit; font-weight:inherit}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Initialization Guard -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

/* While the hero is booting (data-hero-initializing on the container):                                     */
/*  - Kill transitions (no accidental fades);                                                               */
/*  - Optionally hide the stack until JS sets widths/positions;                                             */
/*  - Force the “visible” image to be actually visible;                                                     */
/*  - Keep the Learn More button hidden to avoid layout pops;                                               */

[data-hero-initializing] .hero__icon-strip,
[data-hero-initializing] .hero__image-stack img,
[data-hero-initializing] .hero__item-caption,
[data-hero-initializing] .hero__item-link,
[data-hero-initializing] .hero__item-title,
[data-hero-initializing] .hero__rotating-text {transition:none !important}
[data-hero-initializing] .hero__image-stack img.visible {opacity: 1!important}  /* Avoid learn-more flash. */

/* =+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ Sliding Scene Changes +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ */

.hero-slide-wrapper {backface-visibility:hidden; inset:0; mask-image:none; pointer-events:none;
                     position:absolute; touch-action:pan-y; transform:translateZ(0) translateX(0); 
                     transition:transform var(--slide-duration) var(--slide-ease); 
                     will-change:transform, opacity; z-index:0}

/* Control which scene is on top with a class */
.hero-slide-wrapper.slide--top {z-index:2}

/* Only the active scene should be clickable */
.hero-slide-wrapper.slide--top, .hero-slide-wrapper.slide--at-rest {pointer-events:auto}

.slide--instant {transition:none !important}
.slide--anim {transition:transform var(--slide-duration, 600ms) var(--slide-ease, ease) !important}

.slide--enter-from-right {transform:translateX(100%)}
.slide--enter-from-left  {transform:translateX(-100%)}
.slide--at-rest          {transform:translateX(0%)}
.slide--leave-to-left    {transform:translateX(-100%)}
.slide--leave-to-right   {transform:translateX(100%)}

/* +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ Image Stack +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+= */

/* The image stack consists of two overlaid <img> elements (.image-a and .image-b) used for crossfade       */
/* transitions between carousel slides. Only one image is visible at a time.                                */
/*                                                                                                          */
/* JavaScript dynamically swaps the 'visible' class to fade in the next image while fading out the current. */
/* The 'top' style of .image-stack is updated in JS to vertically center the image within .item-image,      */
/* using offsetHeight and a configurable vertical offset (ImageVertOffset from JSON).                       */
/*                                                                                                          */
/* This layout is shared across all viewports. The image container always spans 100% width and uses         */
/* absolute positioning for animated top/height adjustments.                                                */

.hero__image-stack {inset:0; position:absolute; width:100%}
.hero__image-stack img {left:0; opacity:0; position:absolute; top:0; width:100%; z-index:0;
                        transition:opacity calc(var(--fade-duration) * var(--image-fade-multiplier)) ease}
.hero__image-stack img.visible {filter:none; opacity:1; z-index:1}
.hero__image-stack img:not(.visible) {pointer-events:none}
.hero__image-stack img.fading-out {visibility:hidden}   /* After fade */

/* TEST */
/*.hero__image-stack {opacity: 0.2} */