/* =========================================================================
   studio.furayoshi.com — local layout helpers
   -------------------------------------------------------------------------
   These rules extend furayoshi.com's main design system (main.css) with
   the small layout primitives needed by the studio's services-grid
   homepage and any future multi-column content. They share the same
   colour tokens, type, spacing, and component styles as the parent site.

   Notes:
   - main.css only defines `.hero-body.columns { display: flex; ... }`
     because the parent site only uses a single .columns element (its
     hero). The studio needs `.columns` to behave as a multi-column
     grid wherever it appears, so we add the bare-selector rule here.
   - `.columns` is a 3-up flex row that wraps to a single column on
     narrow viewports. Each `.column` is a flex item with a 320px
     basis; siblings share the leftover space.
   - We intentionally keep this file TINY. Anything visual / thematic
     belongs in main.css so the two sites stay in lockstep.
   ========================================================================= */

/* Generic multi-column row (used by the studio's services grid and any
   other 3-up layout). Wraps to a single column at narrow widths. */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: stretch;
}

.columns > .column {
  flex: 1 1 320px;
  min-width: 0;
}

/* The hero columns are a special-case layout: center the children and
   let them hug their content (the logo and the title). The bare
   `.columns` rule above would stretch them full-width. */
.hero-body.columns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-body.columns > .column {
  flex: 1 1 320px;
  text-align: center;
}

/* Tighten the gap on small screens so the cards still breathe. */
@media (max-width: 672px) {
  .columns { gap: 1rem; }
}

/* -------------------------------------------------------------------------
   Column colour contrast in the BLACK theme
   -------------------------------------------------------------------------
   main.css maps the workflow modifiers to lilac / accent / secondary, which
   in the black theme are three shades of the same purple-pink family
   (#b08bf5 / #d76bff / #ff7ab8) — the three service columns blur together
   on pure black. This site's homepage is organised around those three
   columns, so in the black theme only, reassign the middle column to the
   palette's mint token: lilac / mint / pink — clearly separable hues.
   The dark (aubergine) and light themes keep the parent-site mapping, and
   main.css itself stays untouched. */
:root[data-theme="black"] .notification.is-warning {
  border-left-color: var(--mint);
}
:root[data-theme="black"] .title.center.notification.is-warning:hover {
  background: var(--mint);
  border-color: var(--mint);
}

/* -------------------------------------------------------------------------
   Divine-beam column fill (desktop only)
   -------------------------------------------------------------------------
   On wide viewports each workflow column carries a very subtle animated
   "beam of light" in its own accent colour: a soft vertical gradient
   (brightest at the top, fading downward) plus a few star motes that
   drift down with a gentle gravity — the same spirit as the starry-sky
   canvas, confined to the column. The colour matches the column's
   section accent (the card border) and stays almost transparent, only
   moderately saturated. Hidden on narrow viewports where the columns
   stack, and disabled under prefers-reduced-motion. */

@media (min-width: 673px) {
  .container .column {
    position: relative;
  }

  /* column accent -> beam colour (mirrors the card modifier mapping,
     including the black-theme is-warning -> mint remap above) */
  .column.is-col-primary { --beam: var(--lilac); }
  .column.is-col-warning { --beam: var(--accent); }
  .column.is-col-info    { --beam: var(--secondary); }
  :root[data-theme="black"] .column.is-col-warning { --beam: var(--mint); }

  .column.is-col-primary,
  .column.is-col-warning,
  .column.is-col-info {
    isolation: isolate;
  }

  /* the beam itself: a soft vertical glow, top -> bottom */
  .column.is-col-primary::before,
  .column.is-col-warning::before,
  .column.is-col-info::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      var(--beam, transparent) 0%,
      transparent 72%
    );
    opacity: 0.14;
    filter: blur(18px) saturate(1.35);
  }

  /* star motes falling with a gentle gravity (seamless tile loop) */
  .column.is-col-primary::after,
  .column.is-col-warning::after,
  .column.is-col-info::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image:
      radial-gradient(circle 1.6px at 22% 8%,  var(--beam, transparent) 98%, transparent),
      radial-gradient(circle 1.1px at 68% 30%, var(--beam, transparent) 98%, transparent),
      radial-gradient(circle 1.4px at 40% 55%, var(--beam, transparent) 98%, transparent),
      radial-gradient(circle 1.0px at 82% 74%, var(--beam, transparent) 98%, transparent),
      radial-gradient(circle 1.3px at 12% 88%, var(--beam, transparent) 98%, transparent);
    background-size: 100% 240px;
    background-repeat: repeat-y;
    animation: column-beam-fall 18s linear infinite;
  }

  @keyframes column-beam-fall {
    from { background-position: 0 0; }
    to   { background-position: 0 240px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .column.is-col-primary::after,
    .column.is-col-warning::after,
    .column.is-col-info::after {
      animation: none;
    }
  }
}