/* ==========================================================================
   HOMEPAGE INTRO
   Lives at:  themes/Persona_Free/assets/css/intro.css
   Loaded by: partials/head.hbs  ->  {{css "intro.css" }}

   The site logo starts large in the middle of the screen and travels into the
   top-left corner as you scroll. No appearance animation — it is simply there
   at full size on load.

   The script only publishes one number, --m (0 = middle and big, 1 = corner).
   All the geometry is CSS, so nothing can fail to measure and leave it stuck.
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS  —  change things here
   ========================================================================== */

:root{
   /* the header bar */
   --intro-header-bg:        rgba(16, 26, 34, 1);
   --intro-header-pad-y:     0.55rem;
   --intro-header-pad-x:     clamp(1.5rem, 4vw, 3rem);
   --intro-header-gap:       clamp(0.6rem, 1.1vw, 1rem);

   /* the logo */
   --intro-logo-height:      68px;      /* size once it has landed         */
   --intro-logo-aspect:      2.26;      /* width / height of the artwork   */
   --intro-logo-width-pct:   55vw;      /* big size, share of screen width */
   --intro-logo-max-height:  62vh;      /* ...but never taller than this   */

   /* how long the intro takes to scroll through */
   --intro-blank-height:     30svh;
   --intro-scroll-length:    130svh;

   /* space between the intro and the first row of cards */
   --intro-feed-gap:         clamp(3rem, 7vw, 6rem);

   /* the two link buttons */
   --portal-border-width:    3px;
}

:root{
   --intro-logo-big-height: min(
      calc(var(--intro-logo-width-pct) / var(--intro-logo-aspect)),
      var(--intro-logo-max-height)
   );
}


/* ==========================================================================
   2. HEADER  —  fixed bar on the homepage, logo left, menu right
   ========================================================================== */

.home-template .header{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 60;
   width: 100%;
   max-width: none;
   height: auto;
   margin: 0;
   padding: var(--intro-header-pad-y) var(--intro-header-pad-x);
   gap: var(--intro-header-gap);
   background: var(--intro-header-bg);
   border: 0;
   box-shadow: none;
   pointer-events: none;
}
body.intro-done .header{ pointer-events: auto; }

.home-template .main{ margin-top: 0; }


/* ==========================================================================
   3. THE LOGO
   ========================================================================== */

.home-template .logo{
   position: relative;
   display: block;
   margin-right: auto;              /* this is what sends the menu right */
}

.home-template .logo > img{
   height: var(--intro-logo-height);
   width: auto;
   padding: 0;
   object-fit: contain;
   display: block;
}

body.home-template.intro-js .navbar{
   opacity: 0;
   will-change: opacity, transform;
}

/* the logo is the thing that travels: big in the middle, small in the corner.
   --m runs 0 (middle, big) to 1 (corner, small). The percentages inside
   translate() are the logo's own size, so no measurement is involved. */
body.home-template.intro-js .logo{
   flex-shrink: 0;
   transform: translate(
      calc((50vw - var(--intro-header-pad-x) - 50%) * (1 - var(--m, 0))),
      calc((50vh - var(--intro-header-pad-y) - 50%) * (1 - var(--m, 0)))
   );
   will-change: transform;
}

body.home-template.intro-js .logo > img{
   height: calc(
      var(--intro-logo-big-height) * (1 - var(--m, 0)) +
      var(--intro-logo-height) * var(--m, 0)
   );
}


/* ==========================================================================
   4. THE SCROLL TRACK  —  no content, just distance
   ========================================================================== */

.intro{ display: none; }
body.intro-js .intro{ display: block; position: relative; }

.intro__blank{ height: var(--intro-blank-height); }
.intro__seq{ position: relative; height: var(--intro-scroll-length); }

.home-template .main__content{ padding-top: var(--intro-feed-gap); }


/* ==========================================================================
   5. THE TWO LINK BUTTONS  (notme / raga) — homepage only
   Full-width pair above the cards; stacked on phones.
   ========================================================================== */

.portal{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(.75rem, 1.4vw, 1.1rem);
   width: 100%;
   margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.portal__btn{
   /* each button overrides these two */
   --portal-accent: #ffeea9;
   --portal-ink:    #101a22;

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.15rem clamp(1.1rem, 2vw, 1.75rem);
   border: var(--portal-border-width) dashed rgba(255, 238, 169, .32);
   border-radius: 2px;
   color: #ffeea9;
   background-color: transparent;
   background-clip: padding-box;      /* keeps the dashed border visible on hover */
   text-decoration: none;
   font-family: "Annapurna SIL", sans-serif;
   transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.portal__btn:hover,
.portal__btn:focus-visible{
   border-color: var(--portal-accent);
   color: var(--portal-ink);
}

/* the two accents */
.portal__btn--notme{
   --portal-accent: #ff3131;
   --portal-ink:    #ff3131;
}

.portal__btn--raga{
   --portal-accent: #ffa9dd;
   --portal-ink:    #ffa9dd;
}

.portal__text{
   display: flex;
   flex-direction: column;
   gap: .2rem;
   min-width: 0;
}

.portal__name{
   font-size: 1.35rem;
   line-height: 1.2;
   letter-spacing: .01em;
}

.portal__desc{
   font-size: .85rem;
   line-height: 1.4;
   opacity: .6;
}

.portal__arrow{
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.5;
   transition: transform .3s ease;
}

.portal__btn:hover .portal__arrow{ transform: translateX(4px); }


/* ==========================================================================
   6. PHONES
   ========================================================================== */

@media (max-width: 820px){
   .portal{ grid-template-columns: 1fr; }
   :root{
      --intro-logo-height:    48px;
      --intro-logo-width-pct: 78vw;
      --intro-logo-max-height: 45vh;
   }
}


/* ==========================================================================
   7. REDUCED MOTION  —  no intro, just the normal page
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
   .intro{ display: none !important; }
   .home-template .navbar{ opacity: 1 !important; transform: none !important; }
}