/* PORCH — the sketch column.
   Loaded last, so it layers on top of riverlight.css and site-refinements.css
   without either file (or the inline <style> in index.html) needing changes.

   Two placements:
     1. the "why the name" door on the home page — light climbs the shaft on hover
     2. a quiet corner mark, bottom right of the home page

   The artwork is porch-column.png, used as a MASK: only its alpha matters, so the
   colour comes from the riverlight tokens and stays in step with the rest of the site. */

.column-mark{
  position: absolute;
  pointer-events: none;
  contain: paint;           /* the lit sweep never repaints the card behind it */
}
.column-mark i{
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask-image: url(porch-column.png);
          mask-image: url(porch-column.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.column-mark .ink{ background: rgba(244,240,230,0.10); }
.column-mark .lit{
  background: linear-gradient(0deg, var(--porch-amber-soft) 0%, var(--porch-amber) 45%, rgba(241,212,160,0.75) 100%);
  filter: drop-shadow(0 0 14px rgba(230,187,121,0.5));
  clip-path: inset(82% 0 0 0);   /* at rest only the base is lit */
  opacity: 0.55;
  transition: clip-path 0.75s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
}

/* ---- 1. the "why the name" door ---- */
.riverlight [data-page="index"] a.door.has-column{ overflow: hidden; }
.riverlight [data-page="index"] a.door .column-mark{
  right: -56px;
  bottom: -12px;
  width: 196px;
  height: 220px;
  transform: scaleX(0.84);      /* a slimmer shaft than the sticker's */
  transform-origin: 62% 50%;
}
/* the bloom sits under the veil — soft light loses nothing by being dimmed */
.riverlight [data-page="index"] a.door .column-halo{
  position: absolute;
  right: -72px;
  bottom: -40px;
  width: 262px;
  height: 276px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 56% at 52% 36%, rgba(230,187,121,0.34) 0%, rgba(230,187,121,0.12) 46%, rgba(230,187,121,0) 74%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* the veil keeps the copy's contrast once the stone is bright.
   #19343b is the door's own hover colour, so the veil reads as the card, not a panel. */
.riverlight [data-page="index"] a.door .column-scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    rgba(25,52,59,0.96) 0%,
    rgba(25,52,59,0.92) 54%,
    rgba(25,52,59,0.62) 70%,
    rgba(25,52,59,0) 84%);
  transition: opacity 0.55s ease;
}
.riverlight [data-page="index"] a.door.has-column .door-label,
.riverlight [data-page="index"] a.door.has-column .door-line,
.riverlight [data-page="index"] a.door.has-column .door-cue{
  position: relative;
  text-shadow: 0 1px 8px rgba(13,32,40,0.95), 0 0 2px rgba(13,32,40,0.8);
}
.riverlight [data-page="index"] a.door.has-column .door-line{ max-width: 15em; }

.riverlight [data-page="index"] a.door.has-column:hover .lit,
.riverlight [data-page="index"] a.door.has-column:focus-visible .lit,
.riverlight [data-page="index"] a.door.has-column:active .lit{ clip-path: inset(0 0 0 0); opacity: 1; }
.riverlight [data-page="index"] a.door.has-column:hover .column-halo,
.riverlight [data-page="index"] a.door.has-column:focus-visible .column-halo,
.riverlight [data-page="index"] a.door.has-column:active .column-halo{ opacity: 1; }
.riverlight [data-page="index"] a.door.has-column:hover .column-scrim,
.riverlight [data-page="index"] a.door.has-column:focus-visible .column-scrim,
.riverlight [data-page="index"] a.door.has-column:active .column-scrim{ opacity: 1; }

/* ---- 2. the corner mark ---- */
/* An easter egg: out of sight until you reach the bottom of the page. */
.riverlight [data-page="index"] .corner-mark{
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.3,.7,.3,1), visibility 0s linear 0.5s;
}
.riverlight [data-page="index"] .corner-mark.at-bottom{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
@media (prefers-reduced-motion: reduce){
  .riverlight [data-page="index"] .corner-mark{
    transform: none;
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
  }
  .riverlight [data-page="index"] .corner-mark.at-bottom{ transform: none; }
}
.riverlight [data-page="index"] .corner-mark .corner-label{
  font-family: 'EB Garamond','Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--porch-amber-soft);
  padding-bottom: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.3,.7,.3,1);
}
.riverlight [data-page="index"] .corner-mark .column-mark{
  position: relative;
  width: 76px;
  height: 85px;
}
.riverlight [data-page="index"] .corner-mark .ink{ background: rgba(244,240,230,0.14); }
.riverlight [data-page="index"] .corner-mark .lit{
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(230,187,121,0.45));
  transition: clip-path 0.34s cubic-bezier(.3,.7,.3,1);
}
.riverlight [data-page="index"] .corner-mark:hover .lit,
.riverlight [data-page="index"] .corner-mark:focus-visible .lit{ clip-path: inset(0 0 0 0); }
.riverlight [data-page="index"] .corner-mark:hover .corner-label,
.riverlight [data-page="index"] .corner-mark:focus-visible .corner-label{ opacity: 1; transform: translateX(0); }

/* ---- no hover available: nothing will ever trigger the light ---- */
@media (hover: none){
  /* one more fixed layer is exactly what iOS Safari struggles with here */
  .riverlight [data-page="index"] .corner-mark{ display: none; }
  /* A half-climbed light with no way to finish it reads as a broken image,
     so on touch the column simply arrives lit. */
  .riverlight [data-page="index"] a.door.has-column .lit{ clip-path: inset(0 0 0 0); opacity: 1; }
  .riverlight [data-page="index"] a.door.has-column .column-scrim{ opacity: 1; }
  .riverlight [data-page="index"] a.door.has-column .column-halo{ opacity: 0.55; }
  .topbar-mark .mark-column .lit,
  .chrome .mark .mark-column .lit{ clip-path: inset(0 0 0 0); }
  .topbar-mark .mark-column .ink,
  .chrome .mark .mark-column .ink{ background: transparent; }
}

/* ---- 760px is where riverlight stacks the doors full width, edge to edge ---- */
@media (max-width: 760px){
  .riverlight [data-page="index"] .corner-mark{ display: none; }
  .riverlight [data-page="index"] a.door .column-mark{
    right: -40px;
    bottom: -10px;
    width: 152px;
    height: 171px;
  }
  .riverlight [data-page="index"] a.door .column-halo{
    right: -54px;
    bottom: -32px;
    width: 200px;
    height: 212px;
  }
  .riverlight [data-page="index"] a.door.has-column .door-line{ max-width: 11em; }
}

/* riverlight already disables every transition under reduced motion, so the
   column simply arrives lit rather than climbing. Nothing further needed here. */

/* ---- 3. the story link: the same column, small, beside the invitation ---- */
@media (hover: none){
  .riverlight [data-page="our-story"] .story-link .lit,
  .riverlight [data-page="the-porch"] .closing .closing-column .lit{ clip-path: inset(0 0 0 0); opacity: 1; }
}
.riverlight [data-page="our-story"] .story-link a{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.riverlight [data-page="our-story"] .story-link .column-mark{
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 38px;
}
.riverlight [data-page="our-story"] .story-link a:hover .lit,
.riverlight [data-page="our-story"] .story-link a:focus-visible .lit{
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
@media (max-width: 700px){
  .riverlight [data-page="our-story"] .story-link .column-mark{ width: 25px; height: 32px; }
}

/* ---- 4. the closing mark: the column, fully lit, above the wordmark ---- */
.riverlight [data-page="the-porch"] .closing .closing-column{
  position: relative;
  display: block;
  width: 52px;
  height: 58px;
  margin: 0 auto 16px;
}
.riverlight [data-page="the-porch"] .closing .closing-column .ink{
  background: rgba(244,240,230,0.07);
}
.riverlight [data-page="the-porch"] .closing .closing-column .lit{
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
@media (max-width: 700px){
  .riverlight [data-page="the-porch"] .closing .closing-column{ width: 42px; height: 47px; }
}

/* ---- 5. the site mark: the column standing under the wordmark ---- */
.topbar-mark,
.chrome .mark{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  line-height: 1.05;
}
.topbar-mark .mark-column,
.chrome .mark .mark-column{
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 26px;
  /* the wordmark's cap height, so the column stands the same height as the letters */
  opacity: 0.95;
}
.topbar-mark .mark-column .ink,
.chrome .mark .mark-column .ink{ background: rgba(244,240,230,0.22); }
.topbar-mark .mark-column .lit,
.chrome .mark .mark-column .lit{
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(230,187,121,0.45));
  transition: clip-path 0.34s cubic-bezier(.3,.7,.3,1);
}
.topbar-mark:hover .mark-column .lit,
.topbar-mark:focus-visible .mark-column .lit,
.chrome .mark:hover .mark-column .lit,
.chrome .mark:focus-visible .mark-column .lit{ clip-path: inset(0 0 0 0); }
.topbar-mark .mark-word,
.chrome .mark .mark-word{ display: block; }
@media (max-width: 700px){
  .topbar-mark,
  .chrome .mark{ gap: 8px; }
  .topbar-mark .mark-column,
  .chrome .mark .mark-column{ width: 19px; height: 22px; }
}