/* Dare2Dream gate film (Karina's list 6.1), used on: /dare2dream/. Her gate-film.css and, at the end, her
   dare2dream-top.css (its page selectors given the slash this site's pages use). Added 9 Nov 2026.
   Forum Homini website, editable IIS version v022 20261109 101424. Generated with Claude Opus 5.5. */
/* Dare2Dream gate film · for forumhomini.com/dare2dream (7 Nov 2026)
   The top of the Dare2Dream page: the first frame of the gate film waits with two buttons on it.
   "Music" plays Karina's song (press again to pause). "Open the gate" opens the gates and walks in, with the song;
   the film stops just before the steps up to the dome and stays there. The gate button then goes; Music stays.
   The song stops as soon as the visitor scrolls on past the film.
   Plain CSS, no build tools. Copy as is; the paths to the media are in index.html and gate-film.js. */

.gf {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;            /* the film's own shape: the whole frame shows, from the sign to the lawn */
  overflow: hidden;
  background: #07081a;
}
.gf__poster,
.gf__film {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* (9 Nov 2026, Dewald) shown from near the top, so the neon Dare2Dream sign is never cut off on wide screens (at
     1920px the film's space is 825px tall for a 1080px picture); what is cut is the lawn at the bottom. Was 50% 50%. */
  object-position: 50% 8%;
}
.gf__film {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gf.is-open .gf__film {
  opacity: 1;
}

/* the two buttons side by side, on the centre line of the gate (worked out by the script), low on the film */
.gf__choices {
  position: absolute;
  left: var(--gate-x, 52.9%);
  bottom: clamp(16px, 4%, 40px);
  z-index: 2;
  display: flex;
  gap: 12px;
  inline-size: max-content;
  translate: -50% 0;
}
.gf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  inline-size: 220px;
  block-size: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.gf__btn:focus-visible {
  outline: 2px solid #f5f1ea;
  outline-offset: 3px;
}
/* Music: the site's gold outline */
.gf__btn--music {
  border-color: #e6c27a;
  background: rgb(10 11 28 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff3d6;
}
.gf__btn--music:hover {
  background: rgb(230 194 122 / 0.16);
}
.gf__note,
.gf__pp {
  color: #f3d792;
  fill: currentColor;
}
.gf__note {
  inline-size: 17px;
  block-size: 24px;
  margin-top: -4px;
  transform-origin: 40% 85%;
}
.gf__pp {
  inline-size: 16px;
  block-size: 16px;
}
.gf__pp-pause {
  display: none;
}
.gf__btn--music[aria-pressed='true'] .gf__pp-play {
  display: none;
}
.gf__btn--music[aria-pressed='true'] .gf__pp-pause {
  display: inline;
}
.gf__btn--music[aria-pressed='true'] .gf__note {
  animation: gf-sway 1.1s ease-in-out infinite alternate;
}
/* Open the gate: pink, breathing gently */
.gf__btn--gate {
  background: #d81b78;
  color: #fff;
  animation: gf-breath 3.2s ease-in-out infinite;
}
.gf__btn--gate:hover {
  background: #ea2a8a;
}
.gf__icon {
  inline-size: 20px;
  block-size: 20px;
  margin-top: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gf.is-open .gf__btn--gate {
  display: none;
}
@keyframes gf-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgb(216 27 120 / 0.45); }
  60% { box-shadow: 0 0 0 10px rgb(216 27 120 / 0); }
}
@keyframes gf-sway {
  from { rotate: -12deg; }
  to { rotate: 12deg; }
}

/* phones: the film is small, so the two buttons are slim, side by side, low on the film;
   each still answers a full fingertip around it */
@media (width < 600px) {
  .gf__choices { gap: 8px; bottom: 10px; }
  .gf__btn {
    position: relative;
    inline-size: auto;
    block-size: 32px;
    padding: 0 13px;
    gap: 6px;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }
  .gf__btn::after { content: ''; position: absolute; inset: -6px -2px; }
  .gf__note { inline-size: 12px; block-size: 17px; margin-top: -3px; }
  .gf__pp { inline-size: 11px; block-size: 11px; }
  .gf__icon { inline-size: 15px; block-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf__btn--gate, .gf__note { animation: none !important; }
}

/* OPTIONAL (only when the film has data-music-pointer): the gold treble clef as the pointer on the Dare2Dream page,
   and gold notes floating up from every click or tap. Leave the attribute off to keep the stone tool pointer. */
@media (hover: hover) and (pointer: fine) {
  html:has(.gf[data-music-pointer]),
  html:has(.gf[data-music-pointer]) * {
    cursor: url('media/clef-gold.png') 10 2, auto !important;
    cursor: -webkit-image-set(url('media/clef-gold.png') 1x, url('media/clef-gold@2x.png') 2x) 10 2, auto !important;
  }
}
.gf-notes {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  pointer-events: none;
}
.gf-note {
  position: absolute;
  left: 0;
  top: 0;
  inline-size: 48px;
  block-size: 68px;
  will-change: transform, opacity;
}
.gf-note svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  fill: url(#gf-gold);
  stroke: rgb(60 34 10 / 0.85);
  stroke-width: 0.9;
  filter: drop-shadow(0 0 6px rgb(233 196 138 / 0.75)) drop-shadow(0 1px 1px rgb(18 18 20 / 0.6));
}

/* ── from dare2dream-top.css ── */
/* Dare2Dream page only: the gate film takes the gate photo's place at exactly the photo's size with clean, sharp edges (no fading).
   Nothing else on the page changes. Phone and laptop: the film fills the top edge to edge, at the photo's height. */
html[data-page='/dare2dream/'] .hero__grain,
html[data-page='/dare2dream/'] .hero__shade,
html[data-page='/dare2dream/'] .hero__phototitle { pointer-events: none; }
html[data-page='/dare2dream/'] .gf__choices { z-index: 5; }

html[data-page='/dare2dream/'] .hero__drift .gf {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: transparent;
}