/* Fixed stage, explicit phases: idle → alerts → list → appointment → solved → outro. */
.interface-story {
  position:relative;
  width:100%;
  min-width:0;
  margin:0;
  overflow:visible;
  --story-ease:cubic-bezier(.2,.75,.2,1);
  --row-height:78px;
}
.story-stage {
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:530px;
  height:458px;
  margin-inline:auto;
  pointer-events:none;
  user-select:none;
}
.story-heading {
  position:absolute;
  top:16px;
  left:7%;
  right:5%;
  color:var(--ink);
  font-size:clamp(25px,2.25vw,31px);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:600;
  opacity:0;
  visibility:hidden;
}
.story-heading-phrase { display:inline-block; position:relative; }
.story-heading-phrase::before {
  content:"";
  position:absolute;
  left:-12px;
  top:.08em;
  bottom:.08em;
  width:2px;
  background:var(--red);
  transform-origin:top;
}
.interface-story:is([data-phase="announce"],[data-phase="list"],[data-phase="appointment-intro"],[data-phase="appointment"],[data-phase="appointment-outro"],[data-phase="solving-intro"],[data-phase="solving"],[data-phase="complete"]) .story-heading { opacity:1; visibility:visible; }
.interface-story:is([data-phase="announce"],[data-phase="list"]) .story-heading { font-size:clamp(22px,2.25vw,29px); }
.interface-story:is([data-phase="announce"],[data-phase="list"]) .story-heading-phrase { text-wrap:balance; }
.interface-story:not([data-phase="idle"]) .story-heading-phrase { animation:story-title-enter 420ms var(--story-ease) both; }
.interface-story .story-heading.is-exiting .story-heading-phrase { animation:story-title-exit 180ms ease-in both; }

/* Each notification owns its depth and entrance. Overlap is confined to card edges. */
.story-alerts { position:absolute; inset:30px 5% 18px; opacity:0; visibility:hidden; transition:opacity 360ms,visibility 0s linear 360ms; }
.story-alert-card {
  position:absolute;
  top:0;
  left:5%;
  width:90%;
  height:88px;
  padding:14px 17px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  box-shadow:0 9px 22px -14px rgb(36 35 33 / .3),0 2px 4px rgb(36 35 33 / .025);
  z-index:calc(var(--alert-index) + 1);
  --alert-x:0px;
  --alert-y:calc(var(--alert-index) * 80px);
  --alert-accent:var(--red);
  --alert-enter:580ms;
  opacity:0;
  transform:translate(var(--alert-x),calc(var(--alert-y) + 8px));
  transform-origin:50% 50%;
  transition:transform var(--alert-enter) var(--story-ease),opacity 260ms;
}
.story-alert-card:nth-child(1) { --alert-x:-8px; }
.story-alert-card:nth-child(2) { --alert-x:9px; }
.story-alert-card:nth-child(3) { --alert-x:-3px; }
.story-alert-card:nth-child(4) { --alert-x:7px; }
.story-alert-card:nth-child(5) { --alert-x:-5px; }
.story-alert-card.is-visible { opacity:1; transform:translate(var(--alert-x),var(--alert-y)); }
.story-alert-card--question { --alert-accent:var(--ink); }
.story-alert-card::after { content:""; position:absolute; inset:-1px; border:1px solid var(--alert-accent); border-radius:inherit; opacity:0; pointer-events:none; }
.interface-story[data-phase="problem"][data-intro="errors"] .story-alert-card.is-visible::after { animation:story-alert-pulse 1s ease-in-out var(--alert-enter) forwards; }
.story-alert-symbol { display:grid; place-items:center; flex-shrink:0; width:25px; height:25px; color:var(--red); border:1px solid currentColor; border-radius:50%; font-size:14px; font-weight:600; }
.story-alert-symbol--question { color:var(--muted); }
.story-alert-card>div { display:grid; gap:3px; min-width:0; }
.story-alert-app { color:var(--muted); font-size:10px; line-height:1.1; font-weight:500; }
.story-alert-card strong { font-size:15px; font-weight:550; line-height:1.2; letter-spacing:-.015em; }
.story-alert-detail { color:var(--muted); font-size:11px; line-height:1.25; }
.interface-story[data-phase="problem"] .story-alerts { opacity:1; visibility:visible; transition-delay:0s; }
.interface-story[data-phase="problem"]:not([data-intro="errors"]) .story-alerts { opacity:.13; }
.interface-story[data-phase="problem"]:not([data-intro="errors"]) .story-heading {
  top:46%; left:7%; right:7%;
  transform:translateY(-50%);
  text-align:center;
  font-size:clamp(29px,3vw,39px);
  z-index:6;
  opacity:1;
  visibility:visible;
}
.interface-story[data-phase="problem"] .story-heading-phrase::before { display:none; }
.interface-story[data-phase="problem"][data-intro="reassure"] .story-alerts { opacity:.06; }

/* The list is a separate, compact surface so notification geometry never clips its rows. */
.story-sheet {
  position:absolute;
  top:94px;
  left:5%;
  width:90%;
  padding:0 20px;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity 280ms,transform 480ms var(--story-ease),visibility 0s linear 280ms;
}
.story-sheet-backdrop { position:absolute; inset:0; z-index:-1; border:1px solid var(--line); border-radius:11px; background:var(--white); box-shadow:0 16px 34px -24px rgb(36 35 33 / .3); }
.story-toolbar { height:57px; display:flex; align-items:center; gap:10px; }
.story-toolbar strong { font-size:15px; font-weight:600; }
.story-list-icon { display:grid; gap:4px; width:19px; }
.story-list-icon i { height:1.5px; width:13px; background:var(--ink); margin-left:6px; position:relative; }
.story-list-icon i::before { content:""; position:absolute; left:-6px; width:2px; height:2px; background:var(--ink); }
.story-count { margin-left:auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.story-items { height:calc(3 * var(--row-height)); overflow:hidden; }
.story-items-track { transform:translateY(var(--list-offset,0px)); transition:transform 650ms var(--story-ease); }
.interface-story[data-phase="list"] .story-items-track { transition-duration:320ms; }
.interface-story[data-phase="solving"] .story-items-track { transition-duration:420ms; }
.story-item { display:flex; align-items:center; position:relative; gap:11px; height:var(--row-height); padding:11px 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(9px); transition:opacity 240ms,transform 320ms var(--story-ease); }
.story-item.is-visible { opacity:1; transform:none; }
.story-item-status { width:23px; height:23px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:5px; color:var(--ink); }
.story-check { display:block; width:9px; height:5px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-1px) rotate(-45deg); opacity:0; grid-area:1/1; }
.story-item-copy { display:grid; gap:4px; flex:1; min-width:0; }
.story-item-meta { grid-area:1/1; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.story-app { font-size:10px; font-weight:500; line-height:1.1; color:var(--muted); }
.story-priority { font-size:9px; font-weight:600; color:var(--red); line-height:1.1; white-space:nowrap; }
.story-issue,.story-answer { grid-area:2/1; font-size:14px; font-weight:550; line-height:1.2; letter-spacing:-.015em; }
.story-answer { visibility:hidden; }
.story-detail,.story-result { grid-area:3/1; font-size:11px; color:var(--muted); line-height:1.2; }
.story-result { visibility:hidden; }
.story-item-number { margin-left:auto; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.story-sheet-footer { height:48px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.story-footer-check { display:none; }
.interface-story:is([data-phase="announce"],[data-phase="list"],[data-phase="appointment-intro"],[data-phase="appointment"],[data-phase="appointment-outro"],[data-phase="solving-intro"],[data-phase="solving"]) .story-sheet { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.interface-story:is([data-phase="appointment-intro"],[data-phase="appointment"],[data-phase="appointment-outro"]) .story-sheet { opacity:.23; transform:translateY(-4px); }
.interface-story[data-phase="complete"] .story-sheet { opacity:0; transform:translateY(-8px); }

/* Appointment remains an example, never a simulated booking submitted by the visitor. */
.story-appointment { position:absolute; top:146px; left:9%; width:82%; padding:24px; background:var(--white); border:1px solid var(--ink); border-radius:10px; box-shadow:0 18px 42px -20px rgb(36 35 33 / .28); opacity:0; visibility:hidden; transform:translateY(18px); transition:transform 480ms var(--story-ease),opacity 280ms,visibility 0s linear 280ms; }
.story-appointment-header { display:flex; align-items:center; gap:14px; }
.story-appointment-header>div { display:grid; gap:5px; }
.story-appointment-label { font-size:9px; letter-spacing:.06em; color:var(--muted); }
.story-appointment-header strong { font-size:17px; letter-spacing:-.02em; font-weight:600; line-height:1.2; }
.story-calendar { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:35px; height:37px; flex-shrink:0; border:1.5px solid var(--ink); border-radius:5px; padding:13px 6px 6px; }
.story-calendar::before,.story-calendar::after { content:""; position:absolute; top:-4px; width:1.5px; height:7px; background:var(--ink); }
.story-calendar::before { left:8px; }
.story-calendar::after { right:8px; }
.story-calendar>span { position:absolute; left:0; right:0; top:8px; border-top:1px solid var(--line); }
.story-calendar i { width:3px; height:3px; background:var(--line); }
.story-calendar i:nth-last-child(2) { background:var(--red); }
.story-appointment-person { font-size:12px; color:var(--muted); margin:17px 0; }
.story-venues { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.story-venue { display:flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:6px 7px; border:1px solid var(--line); border-radius:6px; font-size:12px; line-height:1.2; white-space:nowrap; transition:background-color 160ms,border-color 160ms,color 160ms; }
.story-venue-marker { display:grid; place-items:center; width:11px; height:11px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; }
.story-venue-marker::after { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:0; }
.interface-story[data-venue="cafe"] .story-venue--cafe { color:var(--white); border-color:var(--red); background:var(--red); animation:story-confirm 450ms var(--story-ease) both; }
.interface-story[data-venue="cafe"] .story-venue--cafe .story-venue-marker { border-color:currentColor; }
.interface-story[data-venue="cafe"] .story-venue--cafe .story-venue-marker::after { opacity:1; }
.story-booking { display:grid; min-height:42px; }
.story-booking-options { grid-area:1/1; transition:opacity 160ms,visibility 0s linear 160ms; }
.story-slots { display:flex; gap:8px; grid-area:1/1; transition:opacity 160ms,transform 160ms; }
.story-slots>span { display:flex; justify-content:center; align-items:center; gap:6px; flex:1; min-height:42px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-variant-numeric:tabular-nums; }
.story-slot-check { display:none; width:8px; height:5px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-1px) rotate(-45deg); }
.story-booking-confirmed { grid-area:1/1; align-self:center; display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:13px; opacity:0; }
.story-booking-status { display:flex; align-items:center; gap:9px; }
.story-booking-details { display:flex; align-items:center; gap:10px; padding-left:32px; white-space:nowrap; font-size:14px; font-weight:550; font-variant-numeric:tabular-nums; }
.interface-story:is([data-booking="confirming"],[data-booking="confirmed"]) .story-booking-options { opacity:0; visibility:hidden; }
.story-confirm-check { display:grid; place-items:center; width:23px; height:23px; border-radius:5px; background:var(--ink); }
.story-confirm-check::after { content:""; width:9px; height:5px; border-left:1.5px solid var(--white); border-bottom:1.5px solid var(--white); transform:translateY(-1px) rotate(-45deg); }
.interface-story[data-phase="appointment"] .story-appointment { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.interface-story[data-phase="appointment-outro"] .story-appointment { opacity:0; transform:translateY(10px); }
.interface-story:is([data-booking="selected"],[data-booking="confirming"],[data-booking="confirmed"]) .story-selected-slot { background:var(--red); border-color:var(--red); color:var(--white); animation:story-confirm 450ms var(--story-ease) both; }
.interface-story:is([data-booking="selected"],[data-booking="confirming"],[data-booking="confirmed"]) .story-slot-check { display:block; }
.interface-story:is([data-booking="confirming"],[data-booking="confirmed"]) .story-slots { opacity:0; transform:translateY(-4px); }
.interface-story[data-booking="confirmed"] .story-booking-confirmed { opacity:1; animation:story-copy 400ms var(--story-ease) both; }
.story-item.is-working .story-item-status { border-color:var(--red); }
.story-item.is-working .story-item-status::after { content:""; grid-area:1/1; width:11px; height:11px; border:1.5px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:story-working 800ms linear infinite; }
.story-item.is-solved .story-item-status { background:var(--ink); border-color:var(--ink); color:var(--white); }
.story-item.is-solved .story-check { opacity:1; }
.story-item.is-solved .story-issue,.story-item.is-solved .story-detail { visibility:hidden; }
.story-item.is-solved .story-answer,.story-item.is-solved .story-result { visibility:visible; }
.story-item.is-solved .story-priority { color:var(--muted); font-weight:400; }
.interface-story[data-phase="solving"] .story-item.is-solved .story-item-status { animation:story-confirm 450ms var(--story-ease) both; }
.interface-story[data-phase="solving"] .story-item.is-solved .story-answer { animation:story-copy 350ms var(--story-ease) both; }

/* The window closes into a restrained completion note at the same visual anchor. */
.story-finale { position:absolute; top:94px; left:5%; width:90%; padding:32px; border:1px solid var(--line); border-radius:11px; background:var(--white); box-shadow:0 16px 34px -24px rgb(36 35 33 / .25); opacity:0; visibility:hidden; transform:translateY(16px); }
.story-finale-status { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); }
.story-finale-check { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--ink); border-radius:50%; color:var(--ink); }
.story-finale-check::after { content:""; width:9px; height:5px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-1px) rotate(-45deg); }
.story-finale strong { display:block; margin:29px 0 11px; font-size:clamp(27px,2.85vw,38px); letter-spacing:-.04em; line-height:1.08; font-weight:550; }
.story-finale p { margin:0; font-size:15px; line-height:1.4; }
.story-finale-rule { height:2px; width:32px; margin-top:29px; background:var(--red); transform-origin:left; }
.interface-story[data-phase="resolved"] .story-finale { opacity:1; visibility:visible; transform:none; animation:story-finale-in 480ms var(--story-ease) both; }
.interface-story[data-phase="resolved"] .story-finale-rule { animation:story-line-in 650ms var(--story-ease) 350ms both; }
.interface-story[data-phase="outro"] .story-finale { opacity:0; visibility:visible; transform:translateY(-10px); animation:story-finale-out 420ms ease both; }
/* Hide every finished layer immediately on idle/intro. No exit transition can leak through. */
.interface-story[data-phase="idle"] .story-stage { visibility:hidden; }
.interface-story[data-phase="idle"] * { animation:none!important; transition:none!important; }
.interface-story:is([data-phase="idle"],[data-phase="problem"],[data-phase="list"],[data-phase="appointment"],[data-phase="solving"]) .story-finale { opacity:0; visibility:hidden; transform:translateY(16px); animation:none; }
.story-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.story-motion-toggle { position:absolute; top:58px; right:5%; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.story-motion-toggle:focus-visible { width:auto; height:auto; padding:6px 10px; clip-path:none; background:var(--white); color:var(--ink); border:1px solid var(--ink); border-radius:4px; font-size:12px; z-index:7; }
.interface-story[data-paused="true"] *,.interface-story[data-paused="true"] *::before,.interface-story[data-paused="true"] *::after { animation-play-state:paused!important; }
@keyframes story-alert-pulse {
  0%,100% { opacity:0; }
  30% { opacity:.32; }
}
@keyframes story-title-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes story-title-exit { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-6px); } }
@keyframes story-working { to { transform:rotate(360deg); } }
@keyframes story-confirm { 0% { transform:scale(.88); } 60% { transform:scale(1.06); } 100% { transform:scale(1); } }
@keyframes story-copy { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes story-finale-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes story-finale-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-10px); } }
@keyframes story-line-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* Medium screens get a deliberate single-column composition, never a squeezed scene. */
@media (min-width:640px) and (max-width:1050px) {
  .front-hero,.detail-hero { grid-template-columns:minmax(0,1fr); max-width:790px; gap:34px; padding-block:38px 44px; }
  .front-copy { padding-top:0; }
  .front-copy h1 { font-size:clamp(40px,5.7vw,54px); line-height:1.04; }
  .front-copy h1>span:last-child { max-width:none; }
  .interface-story { max-width:530px; justify-self:center; margin:0; }
  .story-heading { font-size:29px; }
}
@media (min-width:1051px) and (max-width:1199px) {
  .front-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; }
  .front-copy h1 { font-size:40px; }
}
@media (max-width:639px) {
  .interface-story { margin:26px auto 0; max-width:480px; }
  .story-stage { height:454px; }
  .story-heading { top:10px; left:7%; font-size:25px; }
  .story-alerts { inset:25px 3% 15px; }
  .story-alert-card { left:4%; width:92%; padding:14px 12px; gap:9px; }
  .story-alert-card strong { font-size:13px; }
  .story-alert-detail { font-size:10px; }
  .story-alert-symbol { width:23px; height:23px; }
  .story-sheet { left:2%; width:96%; padding:0 13px; top:91px; }
  .story-toolbar { gap:8px; }
  .story-toolbar strong { font-size:14px; }
  .story-item { gap:8px; }
  .story-issue,.story-answer { font-size:13px; }
  .story-detail,.story-result { font-size:10px; }
  .story-item-number { display:none; }
  .story-appointment { left:4%; width:92%; padding:20px; }
  .story-appointment-header strong { font-size:16px; }
  .story-finale { top:91px; left:2%; width:96%; padding:25px; }
  .story-finale strong { font-size:29px; margin-top:25px; }
  .story-finale p { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .interface-story *,.interface-story *::before,.interface-story *::after { transition:none!important; animation:none!important; }
  .story-motion-toggle { display:none; }
}