/* hero-ui.css — shared hero UI: ui-demo panel, hero-wipe, diagonal section
   wipes, responsive rules. Loaded globally via the custom_head setting.
   Single source: edit here to update every page that uses the panel. */

/* ===== DIAGONAL DIVIDERS ===== */
/* Diagonal colour-change as a single two-tone gradient painted directly on the
   divider (same element whose full-bleed background already renders correctly).
   A lone background image can't seam at centre. The incoming colour is revealed
   by sliding background-position on scroll — same easing as the hero gray box. */
.rm-diagonal, .rm-diagonal-reverse {
  height: 120px;
  /* keep the full-bleed negative margins from the breakout rule above —
     do NOT reset to margin:0 or the 100vw element shifts to the right half
     and seams down the centre */
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -50vw;
  margin-right: -50vw;
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 0 0;          /* at rest: shows the colour we're leaving */
  transition: background-position 1.2s cubic-bezier(.16, 1, .3, 1);
}
/* top 55% = outgoing colour, bottom = incoming colour, split on a gentle slant */
.rm-diagonal         { background-image: linear-gradient(178deg, var(--bg) 55%, var(--surface) 55%); }
.rm-diagonal-reverse { background-image: linear-gradient(182deg, var(--surface) 55%, var(--bg) 55%); }
/* on scroll-in, slide so the incoming colour rises up diagonally */
.rm-diagonal.wipe-in,
.rm-diagonal-reverse.wipe-in { background-position: 0 100%; }
@media (prefers-reduced-motion: reduce) {
  .rm-diagonal, .rm-diagonal-reverse { transition: none; background-position: 0 100%; }
}

.ui-demo {
    --glow: #e8784a;
    --glow-bright: #ffb27e;
    --panel-bg: rgba(45, 26, 18, 0.55);
    --tab-active: rgba(180, 100, 70, 0.30);
    --text: #fff0ea;
    --text-dim: #b89a8a;
  }.ui-demo * { box-sizing: border-box; margin: 0; padding: 0; }.ui-demo {
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    /* deep terracotta radial glow bleeding from the panel's corner —
       kept dim + dropping fast to near-black so the lit edge can pop */
    background:
      radial-gradient(110% 110% at 8% 4%, #a8421a 0%, #4a1c0a 22%, #170a03 48%, #080301 70%) ,
      #080301;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    overflow: hidden;
  }.ui-demo /* ---- top page chrome (the two buttons peeking at the top) ---- */
  .top-cta {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 10;
  }.ui-demo .top-cta button {
    border: none;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
  }.ui-demo .top-cta .light { background: #fff; color: #201009; }.ui-demo .top-cta .dark { background: #281410; color: #fff; }.ui-demo /* ---- the panel ---- */
  .panel {
    position: relative;
    width: 540px;
    --lift: 120px;                     /* rests lower; rises to 0 on the Blocks step */
    transform: translateY(var(--lift)) scale(1.4);
    transform-origin: bottom right;
    transition: transform .85s cubic-bezier(.16, 1, .3, 1);
    padding: 26px 22px;
    border-radius: 22px 0 0 0;        /* sharp rounding only top-left, like the crop */
    /* directional inner bleed from the lit top-left corner — nothing on right/bottom */
    background:
      linear-gradient(135deg,
        rgba(255,190,160,0.30) 0%,
        rgba(217,119,87,0.12) 16%,
        rgba(217,119,87,0) 34%),
      var(--panel-bg);
    backdrop-filter: blur(22px) saturate(200%);
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    overflow: hidden;
    isolation: isolate;
    /* subtle hairline + soft glow defining the whole border */
    box-shadow:
      inset 0 0 0 1px rgba(255,180,150,0.55),
      0 0 38px rgba(232,120,74,0.70),
      0 -56px 100px rgba(232,120,74,0.50);
  }.ui-demo .panel.risen { --lift: 0px; }.ui-demo /* glowing neon border that wraps the top + left edges, .ui-demo fading out */
  .panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px 0 0 3px;              /* doubled thickness, top + left */
    background:
      linear-gradient(135deg,
        #ffe6dc 0%,
        var(--glow-bright) 10%,
        var(--glow) 30%,
        rgba(217,119,87,0.5) 52%,
        rgba(217,119,87,0) 74%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    /* tight bright sheath hugging the core line */
    filter:
      drop-shadow(0 0 2px rgba(255,230,215,0.98))
      drop-shadow(0 0 6px rgba(255,140,90,0.95));
    pointer-events: none;
  }.ui-demo /* large subtle glow blooming inward from the top, .ui-demo fading down and to the right */
  .panel .inner-bloom {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;                       /* above glass background, below content */
    background:
      radial-gradient(115% 75% at 22% 0%,
        rgba(255,130,80,0.50) 0%,
        rgba(232,120,74,0.18) 32%,
        rgba(232,120,74,0) 60%);
    transition: opacity .7s ease;
  }.ui-demo .panel .inner-bloom.dim { opacity: 0; }.ui-demo /* bright near-white core running inside the blue stroke */
  .panel .stroke-hi {
    content: "";
    position: absolute;
    inset: 1px;                        /* sits ~1px in from the outer edge */
    border-radius: inherit;
    padding: 1.25px 0 0 1.25px;        /* thin top + left highlight */
    /* diagonal fade from the corner: top edge fades white→blue rightward,
       left edge fades white→blue downward, matching rates */
    background:
      linear-gradient(135deg,
        #ffffff 0%,
        #ffe8de 4%,
        rgba(255,200,180,0.7) 12%,
        rgba(255,185,160,0.4) 30%,
        rgba(245,180,155,0.15) 52%,
        rgba(245,180,155,0) 72%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.8));
    pointer-events: none;
    z-index: 2;
  }.ui-demo /* soft diffuse halo blooming outward from the lit top + left edges */
  .panel::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px 0 0 3px;              /* halo on top + left only */
    background:
      linear-gradient(135deg,
        var(--glow-bright) 0%,
        var(--glow) 18%,
        rgba(217,119,87,0.6) 38%,
        rgba(217,119,87,0) 60%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: blur(14px);
    opacity: 0.85;
    pointer-events: none;
  }.ui-demo /* ---- toolbar row ---- */
  .toolbar {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 20px;
  }.ui-demo .canvas-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(200, 120, 90, 0.16);
    color: var(--text);
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
  }.ui-demo .canvas-pill:hover { background: rgba(200, 120, 90, 0.26); }.ui-demo .canvas-pill .logo {
    width: 22px; height: 22px;
    color: #fff;
  }.ui-demo .canvas-pill .chev { color: var(--text-dim); width: 20px; height: 20px; }.ui-demo .tools { display: flex; align-items: center; gap: 26px; }.ui-demo .tools button {
    background: none; border: none; cursor: pointer;
    color: var(--text);
    display: grid; place-items: center;
    width: 34px; height: 34px;
    transition: transform .12s, filter .15s;
  }.ui-demo .tools button:hover { transform: translateY(-1px); }.ui-demo .tools button svg { width: 30px; height: 30px; }.ui-demo /* the glowing triangle */
  .tools .glow-tool {
    color: var(--glow-bright);
    filter: drop-shadow(0 0 6px var(--glow-bright)) drop-shadow(0 0 14px var(--glow));
  }.ui-demo /* ---- tab strip ---- */
  .tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(200, 140, 110, 0.16);
    margin-bottom: 18px;
  }.ui-demo .tab {
    background: none; border: none; cursor: pointer;
    font-size: 26px; font-weight: 600;
    color: var(--text-dim);
    padding: 10px 20px;
    border-radius: 14px;
    transition: color .15s, background .15s;
  }.ui-demo .tab.active {
    color: var(--text);
    background: var(--tab-active);
  }.ui-demo .tab:not(.active):hover { color: #f0d5c2; }.ui-demo /* ---- prompt input ---- */
  .search {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px;
    border-radius: 16px;
    background: rgba(190, 120, 90, 0.10);
    min-height: 160px;                 /* room for ~2 lines of text + the send arrow */
  }.ui-demo .search .search-ico { width: 26px; height: 26px; color: var(--text-dim); margin-top: 3px; flex: none; }.ui-demo .search textarea {
    flex: 1;
    background: none; border: none; outline: none;
    resize: none;
    color: var(--text);
    font-family: inherit;
    font-size: 24px;
    line-height: 1.35;
    height: 70px;                      /* ~2 lines */
    overflow: hidden;
    margin-top: 1px;
    padding-right: 8px;
  }.ui-demo .search textarea::placeholder { color: var(--text-dim); }.ui-demo /* send arrow — dimmed until there's text, .ui-demo then it glows like the triangle tool */
  .send {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 44px; height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--text-dim);
    opacity: 0.5;
    z-index: 6;                        /* sit above the dark corner feather */
    transition: color .3s ease, opacity .3s ease, filter .3s ease, transform .15s ease;
  }.ui-demo .send .arrow { width: 30px; height: 30px; }.ui-demo .send.lit {
    opacity: 1;
    color: var(--glow-bright);
    filter: drop-shadow(0 0 6px var(--glow-bright)) drop-shadow(0 0 14px var(--glow));
  }.ui-demo .send.pressed { transform: scale(0.82); }.ui-demo /* contextual block suggestions — sliding carousel on the Blocks step */
  .suggestion {
    position: relative;
    z-index: 6;                        /* above the corner feather */
    margin-top: 18px;
    border-radius: 14px;
    background: rgba(232, 120, 74, 0.10);
    border: 1px solid rgba(232, 120, 74, 0.30);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
  }.ui-demo .suggestion.show { opacity: 1; transform: translateY(0); }.ui-demo .sugg-track {
    display: flex;
    width: 200%;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  }.ui-demo .sugg-track.slide { transform: translateX(-50%); }.ui-demo .sugg-item {
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    color: var(--text);
    font-size: 22px;
    font-weight: 500;
  }.ui-demo .sugg-item .check {
    width: 26px; height: 26px; flex: none;
    border-radius: 7px;
    border: 2px solid rgba(232, 120, 74, 0.55);
    display: grid; place-items: center;
    color: transparent;
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  }.ui-demo .sugg-item .check svg { width: 16px; height: 16px; }.ui-demo .sugg-item.checked .check {
    background: var(--glow);
    border-color: var(--glow);
    color: #fff;
    box-shadow: 0 0 10px rgba(232, 120, 74, 0.75);
  }.ui-demo /* ---- Pages section header ---- */
  .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    color: var(--text);
    font-size: 24px;
    font-weight: 700;
  }.ui-demo .section-head .add-page {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim);
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    transition: color .15s, background .15s;
  }.ui-demo .section-head .add-page:hover { color: var(--text); background: rgba(200,120,90,0.18); }.ui-demo .section-head .add-page svg { width: 24px; height: 24px; }.ui-demo /* ---- dark feather bleeding in from the bottom-right ---- */
  .feather {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    background:
      radial-gradient(120% 120% at 100% 100%,
        rgba(13,6,2,0.92) 0%,
        rgba(13,6,2,0.78) 18%,
        rgba(13,6,2,0.45) 38%,
        rgba(13,6,2,0.15) 56%,
        rgba(13,6,2,0) 72%);
  }


/* ===== embedded UI demo — hero placement ===== */
.rm-hero { min-height: 90vh; }
.rm-hero-content { margin: 0; max-width: 560px; }
.ui-demo {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* above hero-bg (0), below hero text (2) */
  min-height: 0;             /* cancel the demo's 100vh */
  overflow: visible;
  padding: 0;
  pointer-events: none;
  /* ambient terracotta bleed emanating from the panel corner */
  background: radial-gradient(85% 90% at 82% 60%,
      rgba(168,66,26,0.85) 0%,
      rgba(120,45,18,0.42) 24%,
      rgba(40,16,6,0) 56%);
}
.ui-demo .panel { pointer-events: auto; }
/* keep the panel anchored hard to the bottom-right; smaller scale so it
   grows less to the left and clears the headline */
.ui-demo .panel { transform: translateY(var(--lift)) scale(1.12); --lift: 90px; }

/* gray next-section that rises (diagonal, higher on the right) up over the UI on scroll */
.hero-wipe {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 320px;
  z-index: 5;                 /* above the panel and hero text */
  background: var(--surface);
  clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);  /* gentle diagonal, higher on the right */
  transform: translateY(100%);   /* starts fully below the hero */
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  pointer-events: none;
}
.hero-wipe.raised { transform: translateY(67%); }  /* rises ~105px as one full-width edge, flush with the gray below */
/* Mobile: keep the hero UI panel visible (was hidden), anchored to the RIGHT
   edge at the bottom, behind the hero text (z-index 1 < text 2, so text stays
   legible). Hero text aligns to the TOP to fill the space above the panel. */
@media (max-width: 900px) {
  .rm-hero { min-height: 90vh; align-items: flex-start; }        /* text to the top */
  .ui-demo { justify-content: flex-end; align-items: flex-end; } /* panel bottom-right */
  .ui-demo .panel {
    pointer-events: none;                 /* don't trap touch/scroll on mobile */
    transform: translate(24px, 30px) scale(0.78);
    transform-origin: bottom right;
  }
  .rm-hero-content { max-width: none; }
}
@media (max-width: 768px) {
  .ui-demo .panel { transform: translate(28px, 30px) scale(0.64); transform-origin: bottom right; }
  /* stack the hero buttons vertically */
  .rm-hero-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .ui-demo .panel { transform: translate(28px, 24px) scale(0.54); transform-origin: bottom right; }
}
/* Tablet / narrow desktop: lift the hero text to the top and narrow the
   wrapper so it clears the UI panel on the right. */
@media (min-width: 901px) and (max-width: 1100px) {
  .rm-hero { align-items: flex-start; }
  .rm-hero-content { max-width: 420px; }
}
/* keep the hero fully visible (neutralise the template's hero-fade-on-scroll) */
.rm-hero:has(.hero-wipe) { opacity: 1 !important; transform: none !important; }