/* Aperintelligence AI Academy: the stack of example cards (card-stack.js) and the
   window frame its cards are drawn in. The stack sits in the home hero; the home
   page's portfolio reel and the course pages borrow the frame, and the sphere's
   controls (project-sphere.css) borrow the play pill. Loaded after
   site.css, whose tokens it uses. The stack is ported from aperintelligence.com
   (aperintel/static/assets/home.css); the example cards are the Academy's own. */

:root{
  /* The example cards show apps, not the site, so their colours are fixed and
     do not follow the theme (plan Part 3). */
  --win-bg:     #120E0C;
  --app-paper:  #FBF8F3;
  --app-ink:    #26201B;
  --app-quiet:  #6B5F55;
  --app-rule:   #E7DED3;
  --shadow-win: 0 28px 60px -24px rgba(0,0,0,0.7);
  /* Micro scale for the text inside the example cards only. */
  --app-xs: 10.5px;
  --app-sm: 11.5px;
  --app-md: 12px;
}

/* ---------- the round button and the play pill ---------- */
.icon-btn,.play-pill{border:1px solid var(--button-line);background:transparent;cursor:pointer;color:var(--text);transition:border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out), color var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;}
.play-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:104px;height:42px;padding:0 16px;border-radius:999px;font-size:12px;font-weight:600;flex:none;}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--highlight);box-shadow:0 0 0 0 rgba(228,187,163,.6);animation:pulse 2s infinite;}
.play-pill.is-paused .live-dot{animation:none;background:var(--text-muted);}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(228,187,163,0);}100%{box-shadow:0 0 0 0 rgba(228,187,163,0);}}

/* ---------- card stack ---------- */
/* The cards share one box. data-depth says where each sits: 0 is the front
   card, 1 and 2 fan out behind it, 3 is every card waiting at the back. The
   markup carries the starting order, so the stack is right before the script
   runs; card-stack.js moves it on from there.
   The top padding of .stream-cards is the room the fan rises into. */
.stream{position:relative;}
/* pan-y leaves vertical scrolling to the browser, so a sideways swipe can change the card (card-stack.js).
   A page sets --stack-height on .stream to make the stack smaller. */
.stream-cards{position:relative;height:var(--stack-height, 460px);touch-action:pan-y;}
.stream-card{
  position:absolute;left:0;right:0;bottom:0;height:calc(100% - 44px);
  display:flex;flex-direction:column;gap:12px;padding:14px 14px 16px;
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-edge), 0 40px 80px -30px rgba(0,0,0,.85);
  transform-origin:50% 100%;
  transition:transform .75s var(--ease-out), opacity .5s ease;
}
/* The fan opens up and to the left, into the gap beside the headline, so it
   is never clipped by the edge of the screen. A card leaving flicks the other way. */
.stream-card[data-depth="0"]{z-index:4;}
.stream-card[data-depth="1"]{z-index:3;transform:translate(-3%, -22px) rotate(-3.5deg) scale(.95);background:var(--surface-high);opacity:.9;}
.stream-card[data-depth="2"]{z-index:2;transform:translate(-6%, -40px) rotate(-7deg) scale(.9);background:var(--surface-high);opacity:.6;}
.stream-card[data-depth="3"]{z-index:1;transform:translate(-8%, -52px) rotate(-9deg) scale(.86);opacity:0;}
.stream-card.is-leaving{z-index:5;transform:translate(18%, 48px) rotate(8deg) scale(.96);opacity:0;}
/* Used for one frame to park a card without animating it there. */
.stream-card.no-anim{transition:none;}
.stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}

.stream-controls{display:flex;align-items:center;gap:10px;margin-top:20px;}
.stream-note{margin-top:12px;font-size:var(--fs-meta);color:var(--text-muted);}
.stream-dots{flex:1;display:flex;gap:6px;min-width:0;}
/* 44px tall to be easy to tap; the visible bar is the 3px line drawn in the middle. */
.stream-dots button{position:relative;flex:1;height:44px;padding:0;border:0;background:none;cursor:pointer;}
.stream-dots button::before,.stream-fill{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;}
.stream-dots button::before{background:var(--line-strong);transition:background-color var(--t) var(--ease-out);}
.stream-dots button[aria-current="true"]::before{background:rgba(228,187,163,.3);}
/* The script moves this fill into whichever dot is current. */
.stream-fill{display:block;background:var(--highlight);transform:scaleX(0);transform-origin:left center;}

/* ---------- example cards: a window frame around a still picture ---------- */
/* .app-mock marks anything that holds one of these frames: the hero cards and the portfolio reel. */
.app-mock .win{width:100%;height:100%;border-radius:var(--r-md);background:var(--win-bg);border:1px solid var(--line-strong);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-edge), var(--shadow-win);}
.app-mock .win-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:var(--app-md);color:var(--text-soft);}
.app-mock .win-bar i{width:10px;height:10px;border-radius:50%;background:#3A302A;}
.app-mock .win-bar .grow{flex:1;margin-left:6px;}
.app-mock .win-body{position:relative;flex:1;min-height:0;}
.app-mock .badge{display:inline-flex;align-items:center;font-size:var(--app-xs);font-family:var(--mono);padding:3px 9px;border-radius:999px;border:1px solid rgba(228,187,163,.45);color:var(--highlight);}

/* .shot holds one picture that fills its box; chips and overlays sit on top of it. */
.app-mock .shot{position:relative;overflow:hidden;}
.app-mock .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.app-mock .shot-chip{position:absolute;padding:5px 10px;border-radius:999px;background:rgba(11,8,7,.72);color:#F3ECE6;font-family:var(--mono);font-size:var(--app-xs);backdrop-filter:blur(6px);}
.app-mock .top-right{top:12px;right:12px;}
.app-mock .bottom-left{left:12px;bottom:12px;}
.stream-card .swatches{position:absolute;display:flex;gap:8px;padding:7px 9px;border-radius:999px;background:rgba(11,8,7,.72);backdrop-filter:blur(6px);}
.stream-card .swatches i{width:16px;height:16px;border-radius:50%;background:#16181B;border:2px solid #F3ECE6;}
.stream-card .swatches i:nth-child(2){background:#B5452F;border-color:transparent;}
.stream-card .swatches i:nth-child(3){background:#D9D4CC;border-color:transparent;}

/* One prompt, one landing page: the prompt on the left, the page it produced on the right. */
.stream-card .prompt-result{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);}
.stream-card .prompt-pane{padding:16px 14px;background:#0B0807;color:#E9DED4;font-family:var(--mono);font-size:var(--app-sm);line-height:1.6;border-right:1px solid var(--line);}
.stream-card .prompt-pane b{display:block;margin-bottom:8px;font-size:var(--app-xs);font-weight:500;color:var(--highlight);}
.stream-card .prompt-pane p{margin:0;}
.stream-card .page-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:14px 16px;color:#fff;background:linear-gradient(180deg, rgba(11,8,7,.5) 0%, rgba(11,8,7,0) 55%);}
.stream-card .page-brand{font-size:var(--app-sm);font-weight:600;letter-spacing:.02em;}
.stream-card .page-headline{margin-top:14px;max-width:11ch;font-size:clamp(16px, 1.12vw + 6.5px, 22.5px);font-weight:200;line-height:1.08;letter-spacing:-0.02em;}
.stream-card .page-button{margin-top:14px;padding:7px 14px;border-radius:999px;background:#fff;color:#16110E;font-size:var(--app-sm);font-weight:600;}

/* Online shop: the product on the left, its buy panel on the right. */
.stream-card .shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr);background:var(--app-paper);color:var(--app-ink);}
.stream-card .shop-panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:16px 14px;border-left:1px solid var(--app-rule);}
.stream-card .shop-name{font-size:16px;font-weight:300;letter-spacing:-0.01em;}
.stream-card .shop-price{margin-top:4px;font-size:var(--app-md);color:var(--app-quiet);}
.stream-card .shop-sizes{display:flex;gap:6px;margin-top:14px;}
.stream-card .shop-sizes i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--app-rule);font-style:normal;font-size:var(--app-sm);}
.stream-card .shop-sizes i.on{background:var(--app-ink);border-color:var(--app-ink);color:var(--app-paper);}
.stream-card .shop .page-button{background:var(--app-ink);color:var(--app-paper);}
/* A "Live" chip with a small pulsing dot, on the portfolio reel and the course page examples. */
.live-chip{display:inline-flex;align-items:center;gap:7px;}
.live-chip .live-dot{width:6px;height:6px;}

@media (hover:hover){
  .stream-dots button:hover::before{background:var(--line-hover);}
}

@media (max-width:900px){
  .icon-btn,.play-pill{height:44px;}
  .icon-btn{width:44px;}
}
@media (max-width:640px){
  .stream-cards{--stack-height:440px;}
  .stream-card{height:calc(100% - 36px);padding:10px 10px 12px;border-radius:var(--r-lg);}
  /* On phones the dots are too small to tap, so they only show progress; a swipe or Next changes the card. */
  .stream-dots{pointer-events:none;}
}
@media (max-width:560px){
  .stream-dots{gap:4px;}
  .play-pill{min-width:0;padding:0 14px;}
}