/* Eclipse hero animation for RentEclipse.com. Pairs with eclipse-hero.js. See HANDOFF.md. */

.eclipse-hero{
  --eh-gold:#FCC438;          /* brand gold */
  --eh-black:#2B2A28;         /* Eclipse Black */
  --eh-ground:#15120F;        /* the night sky behind everything */
  --eh-ink:#FAF6F1;
  --eh-muted:#A8A49F;
  position:relative; overflow:hidden; width:100%;
  background:var(--eh-ground); color:var(--eh-ink);
  container-type:inline-size;
  /* Wide screens: twice as wide as tall. This is the shape the picture and its backup were approved at. */
  aspect-ratio:2/1; min-height:520px; max-height:92vh;
}
/* Phones: a tall panel. Applied by width before the script runs, and by the script's own class after. */
@media (max-width:719px){ .eclipse-hero:not(.eclipse-hero--wide){ aspect-ratio:13/20; min-height:0; max-height:none; } }
.eclipse-hero--tall{ aspect-ratio:13/20; min-height:0; max-height:none; }

/* the two picture layers: the live canvas underneath, the still backup on top until the animation is ready */
.eclipse-hero__canvas,.eclipse-hero__still{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.eclipse-hero__still{ object-fit:cover; opacity:1; transition:opacity .9s ease; pointer-events:none; }
/* keep the moon in the same spot as the live picture when the hero is not exactly the approved shape */
.eclipse-hero--wide .eclipse-hero__still{ object-position:70% 40%; }
.eclipse-hero--tall .eclipse-hero__still{ object-position:50% 52%; }
.eclipse-hero--live .eclipse-hero__still{ opacity:0; }
/* 2026-11-10: the animation fades in from the dark sky by itself; the still waits out of sight unless it is needed (see the script) */
.eclipse-hero__canvas{ opacity:0; transition:opacity .7s ease; }
.eclipse-hero--live .eclipse-hero__canvas{ opacity:1; }
.eclipse-hero--wait .eclipse-hero__still{ opacity:0; }
/* 2026-11-10: landmark names, one faint label under each crest, moved by the script */
.eclipse-hero__marks{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.eclipse-hero__marks span{ position:absolute; left:0; top:0; white-space:nowrap; font-size:10px; line-height:1; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(250,246,241,.5); text-shadow:0 1px 3px rgba(12,10,8,.9); opacity:0; transition:opacity .8s ease; will-change:transform; }
.eclipse-hero--still .eclipse-hero__marks,.eclipse-hero--bare .eclipse-hero__marks{ display:none; }
/* thin pointer lines from a peak to its name, where names had to step aside (drawn by the script) */
.eclipse-hero__leads{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; }
.eclipse-hero__leads line{ stroke:rgba(250,246,241,.34); stroke-width:1; opacity:0; transition:opacity .8s ease; }
/* press and hold fast-forwards the picture, so a long press must not select or call up a menu */
.eclipse-hero,.eclipse-hero__canvas{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.eclipse-hero__content,.eclipse-hero__ui{ -webkit-user-select:text; user-select:text; }
.eclipse-hero__sw:disabled{ opacity:.4; cursor:default; }
.eclipse-hero__tip{ margin:10px 0 0; font-size:12px; line-height:1.35; color:var(--eh-muted); }
.eclipse-hero__row em{ font-style:normal; color:var(--eh-muted); font-size:12px; margin-left:4px; }
.eclipse-hero--still .eclipse-hero__canvas{ visibility:hidden; }
.eclipse-hero--still .eclipse-hero__ui{ display:none; }

/* ---------- your content: logo, one line, one button ---------- */
.eclipse-hero__content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; pointer-events:none; }
.eclipse-hero__content > *{ pointer-events:auto; }
.eclipse-hero__logo{ display:block; height:auto; filter:drop-shadow(0 1px 14px rgba(12,10,8,.55)); }
.eclipse-hero__line{ margin:0; font-weight:400; line-height:1.35; color:#EBE7E2; text-shadow:0 1px 18px rgba(12,10,8,.75); }
.eclipse-hero__btn{
  display:inline-block; align-self:flex-start; background:var(--eh-gold); color:var(--eh-black);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em; line-height:1; text-decoration:none;
}
.eclipse-hero__btn:focus-visible{ outline:2px solid var(--eh-ink); outline-offset:3px; }

/* wide: everything on the left, centred top to bottom; the eclipse has the right side */
.eclipse-hero__content{ justify-content:center; padding:0 0 0 6.5cqw; width:50%; }
.eclipse-hero__logo{ width:31cqw; max-width:none; margin-left:-1.1cqw; }
.eclipse-hero__cta{ margin-top:2cqw; }
.eclipse-hero__line{ font-size:clamp(15px,1.75cqw,26px); max-width:30cqw; }
.eclipse-hero__btn{ font-size:clamp(12px,1.15cqw,17px); padding:1.2em 2.2em; margin-top:2.4cqw; }

/* tall: logo at the top, the line and button at the bottom, the eclipse far away in between */
@media (max-width:719px){
  .eclipse-hero:not(.eclipse-hero--wide) .eclipse-hero__content{ justify-content:space-between; padding:5cqw 7cqw 8cqw 5cqw; width:100%; }
  .eclipse-hero:not(.eclipse-hero--wide) .eclipse-hero__logo{ width:52cqw; margin-left:0; }
  .eclipse-hero:not(.eclipse-hero--wide) .eclipse-hero__cta{ margin:0 0 0 2cqw; }
  .eclipse-hero:not(.eclipse-hero--wide) .eclipse-hero__line{ font-size:4.3cqw; max-width:none; }
  .eclipse-hero:not(.eclipse-hero--wide) .eclipse-hero__btn{ font-size:3.2cqw; padding:1.05em 1.9em; margin-top:5cqw; }
}
.eclipse-hero--tall .eclipse-hero__content{ justify-content:space-between; padding:5cqw 7cqw 8cqw 5cqw; width:100%; }
.eclipse-hero--tall .eclipse-hero__logo{ width:52cqw; margin-left:0; }
.eclipse-hero--tall .eclipse-hero__cta{ margin:0 0 0 2cqw; }
.eclipse-hero--tall .eclipse-hero__line{ font-size:4.3cqw; max-width:none; }
.eclipse-hero--tall .eclipse-hero__btn{ font-size:3.2cqw; padding:1.05em 1.9em; margin-top:5cqw; }

/* ---------- the hidden menu: a faint ring in the corner that opens a small panel ---------- */
.eclipse-hero__ui{ position:absolute; inset:0; z-index:3; pointer-events:none; font-family:inherit; }
.eclipse-hero__ui > *{ pointer-events:auto; }
.eclipse-hero__menu-btn{
  position:absolute; right:4px; bottom:4px; width:44px; height:44px; border:0; background:transparent; padding:0;
  color:var(--eh-ink); opacity:.30; display:grid; place-items:center; cursor:pointer; transition:opacity .2s ease;
}
.eclipse-hero__menu-btn svg{ width:15px; height:15px; }
/* 2026-11-10: one soft gold flash on the ring, five seconds in (the script adds this class once) */
@keyframes eclipse-hero-hint{
  0%,100%{ opacity:.30; color:var(--eh-ink); transform:scale(1); filter:none; }
  22%,62%{ opacity:1; color:var(--eh-gold); transform:scale(1.3); filter:drop-shadow(0 0 7px rgba(252,196,56,.75)); }
  42%{ opacity:.6; color:var(--eh-gold); transform:scale(1.08); filter:drop-shadow(0 0 3px rgba(252,196,56,.4)); }
}
.eclipse-hero__menu-btn--hint{ animation:eclipse-hero-hint 2.4s ease-in-out 1; }
.eclipse-hero__menu-btn:hover,.eclipse-hero__menu-btn:focus-visible,.eclipse-hero__menu-btn[aria-expanded="true"]{ opacity:1; }
.eclipse-hero__ui button:focus-visible,.eclipse-hero__ui input:focus-visible{ outline:2px solid var(--eh-ink); outline-offset:2px; }
.eclipse-hero__menu{
  position:absolute; right:10px; bottom:50px; width:min(272px,calc(100% - 20px)); max-height:calc(100% - 60px); overflow-y:auto;
  background:rgba(24,22,18,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(250,246,241,.16); padding:12px 14px 14px; font-size:14px; line-height:1.3; color:var(--eh-ink); text-align:left;
}
.eclipse-hero__menu[hidden]{ display:none; }
.eclipse-hero__menu-head{ display:flex; align-items:center; justify-content:space-between; font-weight:600; margin-bottom:4px; }
.eclipse-hero__menu-x{ appearance:none; border:0; background:transparent; color:var(--eh-muted); width:36px; height:36px; margin:-8px -10px -8px 0; display:grid; place-items:center; cursor:pointer; padding:0; }
.eclipse-hero__menu-x svg{ width:14px; height:14px; }
.eclipse-hero__row{ display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.eclipse-hero__sw{ appearance:none; border:1px solid rgba(250,246,241,.28); background:transparent; width:44px; height:26px; border-radius:13px; padding:0; position:relative; cursor:pointer; }
.eclipse-hero__sw i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--eh-muted); transition:transform .18s ease,background .18s ease; }
.eclipse-hero__sw[aria-checked="true"]{ background:rgba(252,196,56,.22); border-color:var(--eh-gold); }
.eclipse-hero__sw[aria-checked="true"] i{ transform:translateX(18px); background:var(--eh-gold); }
/* 2026-11-10: compact menu, so it fits without scrolling */
.eclipse-hero__chips{ display:flex; gap:8px; margin:2px 0 8px; }
.eclipse-hero__chip{ appearance:none; flex:1 1 auto; white-space:nowrap; border:1px solid rgba(250,246,241,.24); background:transparent; color:var(--eh-ink); font:500 13px/1 inherit; font-family:inherit; padding:9px 4px; min-height:34px; cursor:pointer; }
.eclipse-hero__chip[aria-checked="true"]{ background:rgba(252,196,56,.18); border-color:var(--eh-gold); color:var(--eh-gold); }
.eclipse-hero__chip:disabled{ opacity:.4; cursor:default; }
.eclipse-hero__slide{ display:grid; grid-template-columns:86px 1fr; align-items:center; gap:10px; padding:2px 0; }
.eclipse-hero__slide span{ display:block; margin:0; }
.eclipse-hero__slide em{ font-style:normal; color:var(--eh-muted); font-size:12px; margin-left:4px; }
.eclipse-hero__slide input{ width:100%; height:26px; margin:0; accent-color:var(--eh-gold); }
.eclipse-hero__slide input:disabled{ opacity:.4; }
.eclipse-hero__btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.eclipse-hero__btns button{ appearance:none; flex:1 1 auto; border:1px solid rgba(250,246,241,.24); background:transparent; color:var(--eh-ink); font:500 13px/1 inherit; font-family:inherit; padding:8px 8px; min-height:34px; cursor:pointer; }
.eclipse-hero__btns button[aria-pressed="true"]{ background:var(--eh-gold); color:var(--eh-black); border-color:var(--eh-gold); }

/* tool mode (?eclipse-bare): only the live picture, for making the backup stills */
.eclipse-hero--bare .eclipse-hero__content,.eclipse-hero--bare .eclipse-hero__ui,.eclipse-hero--bare .eclipse-hero__still{ display:none !important; }