/* showcase.html: page-specific finish, loaded after inner.css and scoped to body[data-page="showcase"].
   Icon tiles on the cards and figures, numbered pavilion zones, a contained exhibitor strip, finished forms and a quiet orbit
   behind the Product Launchpad. Colours come only from the site.css tokens, so light and dark mode both follow. */

/* ================= CARDS: icon tile, label, title, text; actions sit on the bottom edge ================= */
body[data-page="showcase"] .cards{gap:16px}
body[data-page="showcase"] .ic{padding:26px 26px 24px;border-radius:20px;gap:10px}
body[data-page="showcase"] .ic h3{font-size:clamp(1.12rem,1.5vw,1.25rem);line-height:1.25}
body[data-page="showcase"] .ic p{line-height:1.6}
body[data-page="showcase"] .ic .acts{margin-top:10px}
body[data-page="showcase"] .ic .xi{width:46px;height:46px;padding:12px;margin-bottom:8px;border-radius:14px;color:var(--teal);stroke-width:1.8;
  background:color-mix(in srgb,var(--teal) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 20%,transparent);
  transition:transform .6s var(--spring),background .4s var(--ease-out),color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
body[data-page="showcase"] .ic:hover .xi{transform:rotate(-8deg) scale(1.08);background:var(--teal);color:var(--teal-ink);
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--teal) 80%,transparent)}
/* alternate the accent so a row of tiles reads as a set, not a stamp */
body[data-page="showcase"] .cards > .ic:nth-child(even) .xi{color:var(--turmeric);background:color-mix(in srgb,var(--turmeric) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--turmeric) 24%,transparent)}
body[data-page="showcase"] .cards > .ic:nth-child(even):hover .xi{background:var(--turmeric);color:var(--surface);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--turmeric) 80%,transparent)}
body[data-page="showcase"] .ic .acts .btn-line{padding-inline:16px}
body[data-page="showcase"] .ic .acts .btn-line:hover{border-color:var(--teal);color:var(--teal)}

/* ================= FIGURES: icon tile, then the number, then its label ================= */
body[data-page="showcase"] .figrow{gap:16px}
body[data-page="showcase"] .figrow div{border-radius:20px;padding:24px 24px 26px;background:var(--surface)}
body[data-page="showcase"] .figrow .fi{display:block;width:40px;height:40px;padding:10px;margin-bottom:18px;border-radius:12px;stroke-width:1.9;color:var(--teal);
  background:color-mix(in srgb,var(--teal) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 20%,transparent);
  transition:transform .6s var(--spring)}
body[data-page="showcase"] .figrow div:nth-child(even) .fi{color:var(--turmeric);background:color-mix(in srgb,var(--turmeric) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--turmeric) 24%,transparent)}
body[data-page="showcase"] .figrow div:hover .fi{transform:rotate(-8deg) scale(1.08)}
body[data-page="showcase"] .figrow span{font-size:14.5px;line-height:1.45;margin-top:10px}

/* ================= FORMS: sentence-case labels, taller fields, a quiet footer for the action ================= */
body[data-page="showcase"] .form{padding:32px;gap:18px;border-radius:22px}
body[data-page="showcase"] .form label{font:600 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}
body[data-page="showcase"] .form input,body[data-page="showcase"] .form select{min-height:48px}
body[data-page="showcase"] .form input,body[data-page="showcase"] .form select,body[data-page="showcase"] .form textarea{padding:12px 14px;font-size:15px;background:var(--paper);border-color:var(--line)}
body[data-page="showcase"] .form textarea{min-height:124px;line-height:1.55}
body[data-page="showcase"] .form input:hover,body[data-page="showcase"] .form select:hover,body[data-page="showcase"] .form textarea:hover{border-color:color-mix(in srgb,var(--teal) 35%,var(--line))}
body[data-page="showcase"] .form input::placeholder,body[data-page="showcase"] .form textarea::placeholder{color:var(--placeholder)}
body[data-page="showcase"] .form .actions{gap:12px 16px;margin-top:6px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
body[data-page="showcase"] .form .actions .btn{min-height:46px;padding-inline:24px}
body[data-page="showcase"] .form .done{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;line-height:1.5;
  background:color-mix(in srgb,var(--ok) 10%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent);animation:sc-in .5s var(--ease-out)}
body[data-page="showcase"] .form .done::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
@keyframes sc-in{from{opacity:0;transform:translateY(6px)}}
/* a form stays still under the pointer: the shared card tilt is for reading, not typing */
@media (hover:hover) and (pointer:fine){body[data-page="showcase"] form.card:hover,body[data-page="showcase"] form.card:focus-within{transform:none!important}}

/* email address: a clean chip instead of a monospace run */
body[data-page="showcase"] main .muted code{font:500 .94em/1.4 var(--sans);color:var(--ink);padding:3px 10px;border-radius:8px;overflow-wrap:anywhere;
  background:color-mix(in srgb,var(--teal) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 18%,transparent)}
body[data-page="showcase"] .lead-p{line-height:1.65}

@media (max-width:560px){
  body[data-page="showcase"] .ic{padding:22px 20px 20px}
  body[data-page="showcase"] .form{padding:22px 18px;gap:16px}
  body[data-page="showcase"] .form .actions .btn{width:100%}
  /* figures pair up on phones instead of stacking four tall cards */
  body[data-page="showcase"] .figrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="showcase"] .figrow div{padding:16px 14px 18px;border-radius:16px}
  body[data-page="showcase"] .figrow .fi{width:34px;height:34px;padding:8px;margin-bottom:12px;border-radius:10px}
  body[data-page="showcase"] .figrow b{font-size:clamp(1.35rem,7vw,1.75rem)}
  body[data-page="showcase"] .figrow span{font-size:13px;margin-top:6px}
}

/* ================= EXHIBITION: past-exhibitor strip as a contained plate with soft edges ================= */
body[data-page="showcase"] .sc-strip{max-width:1200px;margin-inline:auto;padding-inline:24px}
body[data-page="showcase"] .sc-strip .marq{position:relative;padding:16px 0;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:20px;box-shadow:var(--lift)}
body[data-page="showcase"] .sc-strip .marq::before,body[data-page="showcase"] .sc-strip .marq::after{content:"";position:absolute;top:0;bottom:0;width:72px;z-index:1;pointer-events:none}
body[data-page="showcase"] .sc-strip .marq::before{left:0;background:linear-gradient(90deg,#fff,rgb(255 255 255 / 0))}
body[data-page="showcase"] .sc-strip .marq::after{right:0;background:linear-gradient(270deg,#fff,rgb(255 255 255 / 0))}

/* ================= PRODUCT LAUNCHPAD: orbit rings behind the copy ================= */
body[data-page="showcase"] #launchpad{overflow:hidden;isolation:isolate}
body[data-page="showcase"] #launchpad .wrap{position:relative;z-index:1}
body[data-page="showcase"] #launchpad::before,body[data-page="showcase"] #launchpad::after{content:"";position:absolute;top:50%;right:-200px;border-radius:50%;pointer-events:none;z-index:0}
body[data-page="showcase"] #launchpad::after{width:460px;height:460px;margin-top:-230px;border:1px solid color-mix(in srgb,var(--glow-b) 22%,transparent);
  box-shadow:0 0 0 70px color-mix(in srgb,var(--glow-b) 4%,transparent),0 0 0 150px color-mix(in srgb,var(--glow-b) 2.5%,transparent)}
body[data-page="showcase"] #launchpad::before{width:640px;height:640px;margin-top:-320px;right:-300px;border:1px dashed color-mix(in srgb,var(--glow-a) 22%,transparent);
  animation:sc-orbit 90s linear infinite}
@keyframes sc-orbit{to{transform:rotate(360deg)}}
body[data-page="showcase"] #launchpad h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
body[data-page="showcase"] #launchpad .lead-p{font-size:clamp(1.05rem,1.4vw,1.16rem);line-height:1.7;margin-bottom:26px}
body[data-page="showcase"] #launchpad .row-gap{gap:12px}
body[data-page="showcase"] #launchpad .two{align-items:center}

/* ================= ELIGIBILITY: the answer sits in a soft panel ================= */
body[data-page="showcase"] #eligibility .two{align-items:center}
body[data-page="showcase"] #eligibility .two > div:last-child{padding:28px 30px;border-radius:22px;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);box-shadow:var(--lift)}
body[data-page="showcase"] #eligibility .lead-p{margin-bottom:20px}

/* ================= BOOK / APPLY: headline column aligns with the form's top ================= */
body[data-page="showcase"] #book .two,body[data-page="showcase"] #apply .two{gap:56px}
body[data-page="showcase"] #book .lead-p,body[data-page="showcase"] #apply .lead-p{color:var(--ink-2)}

@media (max-width:900px){
  body[data-page="showcase"] #book .two,body[data-page="showcase"] #apply .two{gap:28px}
  body[data-page="showcase"] #launchpad::after{right:-260px}
  body[data-page="showcase"] #launchpad::before{right:-360px}
}
@media (max-width:600px){
  body[data-page="showcase"] .sc-strip{padding-inline:16px}
  body[data-page="showcase"] .sc-strip .marq::before,body[data-page="showcase"] .sc-strip .marq::after{width:36px}
  body[data-page="showcase"] #eligibility .two > div:last-child{padding:22px 18px}
  body[data-page="showcase"] #eligibility .btn{white-space:normal;text-align:center;max-width:100%}
  body[data-page="showcase"] #launchpad::before{display:none}
  body[data-page="showcase"] #launchpad::after{right:-330px;opacity:.7}
}
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body[data-page="showcase"] #launchpad::before,html:not(.force-motion) body[data-page="showcase"] .form .done{animation:none}
  html:not(.force-motion) body[data-page="showcase"] .ic .xi,html:not(.force-motion) body[data-page="showcase"] .figrow .fi,html:not(.force-motion) body[data-page="showcase"] [data-pavilions] > .card::after{transition:none}
  html:not(.force-motion) body[data-page="showcase"] .ic:hover .xi,html:not(.force-motion) body[data-page="showcase"] .figrow div:hover .fi{transform:none}
}

/* ================= PRODUCT LAUNCHPAD: copy at left, the stage photo at right ================= */
body[data-page="showcase"] #launchpad{padding-block:clamp(64px,8vw,104px);
  background:radial-gradient(700px 420px at 85% 50%,rgb(124 58 237 / .28),transparent 65%),radial-gradient(500px 360px at 0% 100%,rgb(34 211 238 / .08),transparent 60%),var(--night)}
body[data-page="showcase"] #launchpad::before,body[data-page="showcase"] #launchpad::after{display:none}
body[data-page="showcase"] .lp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
body[data-page="showcase"] #launchpad h2{margin:16px 0 18px;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.06;color:#fff}
body[data-page="showcase"] #launchpad .lead-p{max-width:50ch;margin:0 0 24px;color:var(--on-night-2)}
body[data-page="showcase"] .lp-points{display:grid;gap:12px;margin:0 0 30px;padding:0;list-style:none}
body[data-page="showcase"] .lp-points li{display:flex;align-items:center;gap:12px;font:500 15.5px/1.4 var(--sans);color:#fff}
body[data-page="showcase"] .lp-points svg.li{flex:none;width:34px;height:34px;padding:8px;border-radius:10px;color:#C4B5FD;background:rgb(167 139 250 / .12);box-shadow:inset 0 0 0 1px rgb(167 139 250 / .25)}
body[data-page="showcase"] #launchpad .btn{min-height:50px;padding:0 24px;gap:10px}
body[data-page="showcase"] #launchpad .btn svg.li{width:16px;height:16px}
body[data-page="showcase"] .lp-media{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:3/2;
  box-shadow:0 0 0 1px rgb(255 255 255 / .1),0 40px 80px -30px rgb(124 58 237 / .6)}
body[data-page="showcase"] .lp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
body[data-page="showcase"] .lp-media:hover img{transform:scale(1.03)}
body[data-page="showcase"] .lp-media figcaption{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  font:600 13.5px/1 var(--sans);color:#fff;background:rgb(10 10 31 / .6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
body[data-page="showcase"] .lp-media .dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgb(74 222 128 / .2)}
@media (max-width:900px){
  body[data-page="showcase"] .lp-grid{grid-template-columns:1fr}
  body[data-page="showcase"] .lp-media{order:-1}
}
@media (max-width:560px){
  body[data-page="showcase"] #launchpad .row-gap .btn{flex:1 1 100%;justify-content:center}
  body[data-page="showcase"] .lp-media{border-radius:18px}
}