:root{
  --km-orange:#FE8600;
  --km-black:#07070A;
  --km-white:#FEFEFF;

  --pt-fg:#0B0B10;
  --me-fg:#FEFEFF;

  /* Split */
  --dur: 1500ms;
  --ease: cubic-bezier(.15,.85,.12,1);
  --big: 1.65;
  --small: 1;

  /* Card */
  --radius: 22px;
  --shadow-soft: 0 18px 60px rgba(0,0,0,.14);
  --shadow-dark: 0 22px 70px rgba(0,0,0,.28);

  /* Fixed card height (+50% vs old baseline) */
  --card-h: clamp(243px, 32.4vh, 351px);
  --card-pad: 24px;

  /* Logo */
  --logo-top: 18px;
  --logo-side: 18px;
  --logo-gap: 14px;

  /* Typography */
  --title-size: clamp(34px, 4.8vw, 60px);
  --sub-size: clamp(14px, 1.7vw, 18px);

  /* Fit scale (set per .surface in JS) */
  --fit-scale: 1;
}

*{ box-sizing:border-box; }
html, body { height:100%; margin:0; }
body{
  font-family:"Kumbh Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--km-black);
  overflow:hidden;
}

/* Portal */
.portal{
  position:relative;
  width:100vw;
  height:100vh;
  height:100svh; /* iOS-friendly */
  display:flex;
  align-items:stretch;
  isolation:isolate;
}

/* Panels */
.panel{
  position:relative;
  flex: 1 1 0%;
  min-width:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding: clamp(18px, 4vw, 58px);
  transition: flex var(--dur) var(--ease);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* Divider */
.divider{
  width:1px;
  flex: 0 0 1px;
  background: linear-gradient(
    to bottom,
    rgba(254,134,0,0),
    rgba(254,134,0,.70),
    rgba(254,134,0,0)
  );
  opacity:.40;
  pointer-events:none;
}

/* Split states */
.portal.active-pt #pt{ flex: var(--big) 1 0%; }
.portal.active-pt #me{ flex: var(--small) 1 0%; }
.portal.active-me #me{ flex: var(--big) 1 0%; }
.portal.active-me #pt{ flex: var(--small) 1 0%; }

/* Backgrounds (images + washout overlay) */
.panel--pt{ color: var(--pt-fg); }
.panel--me{ color: var(--me-fg); }

.panel--pt::after,
.panel--me::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform: translateZ(0); /* Safari paint stability */
}

.panel--pt::after{ background-image: url("./assets/bkg-pt.jpg"); }
.panel--me::after{ background-image: url("./assets/bkg-me.jpg"); }

.panel--pt::before,
.panel--me::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background: rgba(0,0,0,1);
  opacity: .48; /* contracted washout */
  transition: opacity 950ms var(--ease);
}

.portal.active-pt #pt::before,
.portal.active-me #me::before{
  opacity: .08; /* selected reveal */
}

/* Card surface */
.surface{
  position:relative;
  z-index:5;
  width: min(640px, 92%);
  height: var(--card-h);
  padding: var(--card-pad);
  border-radius: var(--radius);
  overflow:hidden;

  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow-soft);

  /* Fit scale (set by JS per card) */
  --fit-scale: 1;
}

.panel--me .surface{
  background: rgba(7,7,10,.90);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-dark);
}

/* Inner */
.cardInner{
  position:relative;
  width:100%;
  height:100%;
}

/* Logo (always visible, never duplicated) */
.cardLogoWrap{
  position:absolute;
  top: var(--logo-top);
  z-index:10;
  pointer-events:none;
}

.cardLogo{
  display:block;
  height: auto;
  max-width: 220px;
  width: 140px; /* desktop default */
}

/* Layers */
.layer{
  position:absolute;
  inset:0;
  z-index:6;
  display:grid;
  /* reserve space for logo */
  padding-top: calc(var(--logo-top) + 44px + var(--logo-gap));
  padding-left: var(--card-pad);
  padding-right: var(--card-pad);
  padding-bottom: var(--card-pad);

  transition: opacity var(--dur) var(--ease);
}

.layerCompact{ opacity:1; pointer-events:auto; }
.layerExpanded{ opacity:0; pointer-events:none; }

.portal.active-pt #pt .layerCompact,
.portal.active-me #me .layerCompact{
  opacity:0; pointer-events:none;
}

.portal.active-pt #pt .layerExpanded,
.portal.active-me #me .layerExpanded{
  opacity:1; pointer-events:auto;
}

/* Content wrappers (these are what gets scaled) */
.compactContent,
.expandedContent{
  display:inline-flex;
  flex-direction:column;
  gap: 14px;
  max-width: 100%;
  transform: scale(var(--fit-scale));
  will-change: transform;
}

/* Kicker */
.kicker{
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.80;
}

/* Stack typography */
.title{
  font-family:"Outfit", sans-serif;
  font-weight:900;
  font-size: var(--title-size);
  line-height:1.01;
  margin:0;
  color: var(--km-orange);
}

.subtitle{
  font-weight:300;
  font-size: var(--sub-size);
  line-height:1.55;
  margin:0;
  opacity:.92;
  max-width: 44ch;
}

.panel--me .subtitle{ max-width: 40ch; opacity:.90; }

/* CTA */
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 12px 16px;
  border-radius: 999px;

  font-size:14px;
  font-weight:600;
  text-decoration:none;

  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.66);
  color: var(--pt-fg);
  width: fit-content;
}

.panel--me .cta{
  color: var(--me-fg);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
}

.cta .arrow{
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:999px;
  background: rgba(254,134,0,.16);
  border: 1px solid rgba(254,134,0,.22);
}

.cta svg{ width:16px; height:16px; }

/* =============
   Alignment rules
   ============= */

/* Contracted (global + per-card): center EVERYTHING */
.panel.compact .cardLogoWrap{
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.panel.compact .layer{
  place-items:center;
  text-align:center;
}

.panel.compact .compactContent{
  align-items:center;
  transform-origin: center top;
}

/* Expanded: PT left, ME right (logo + content) */
.panel.expanded.panel--pt .cardLogoWrap{
  left: var(--logo-side);
  right: auto;
  transform:none;
}

.panel.expanded.panel--me .cardLogoWrap{
  right: var(--logo-side);
  left: auto;
  transform:none;
}

.panel.expanded.panel--pt .layerExpanded{
  justify-items:start;
  text-align:left;
}

.panel.expanded.panel--me .layerExpanded{
  justify-items:end;
  text-align:right;
}

.panel.expanded.panel--pt .expandedContent{
  align-items:flex-start;
  transform-origin: left top;
}

.panel.expanded.panel--me .expandedContent{
  align-items:flex-end;
  transform-origin: right top;
}

.panel.expanded.panel--pt .cta{ align-self:flex-start; }
.panel.expanded.panel--me .cta{ align-self:flex-end; }

/* Make sure compact layer content always centered */
.layerCompact{
  place-items:center;
  text-align:center;
}

/* =============
   Mobile tuning (Safari-first)
   ============= */
@media (max-width: 720px){
  :root{
    --card-h: clamp(216px, 33.6svh, 324px);
    --card-pad: 18px;
    --logo-top: 14px;
    --logo-side: 14px;
    --logo-gap: 12px;
    --title-size: clamp(26px, 7.2vw, 42px);
    --sub-size: clamp(13px, 3.8vw, 16px);
  }

  .cardLogo{
    width: 120px;
    max-width: 180px;
  }

  .layer{
    padding-top: calc(var(--logo-top) + 40px + var(--logo-gap));
  }

  .kicker{ font-size:11px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .panel{ transition:none !important; }
  .layer{ transition:none !important; }
}

/* iOS/Safari guard */
@supports (-webkit-touch-callout: none){
  .portal{ height:100svh; }
}

/* Center card meta (kicker) ONLY in contracted/compact mode */
.panel.compact #kicker{
  display: inline-block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}