/* ==========================================================================
   CodePen-style Timeline with plain circles (no emojis)
   ========================================================================== */

:root{
  /* Light (high-tech) */
  --bg: #ffffff;
  --ink: #000000;
  --muted: #4b5563;
  --line: #000000;
  --card: rgba(0,0,0,0.03);
  --card-border: #000000;
  --icon-bg: #ffffff;
  --grad-a: #000000;
  --grad-b: #000000;

  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.09);
}

body{ background: var(--bg); color: var(--ink); }

/* Creative variant */
body.creative-layout{
  --bg: #DBE9B7;
  --ink: #4B3621;
  --muted: #4B3621;
  --line: #4B3621;
  --card: rgba(255,255,255,0.18);
  --card-border: transparent;
  --icon-bg: #DEA5A4;
  --grad-a: #DEA5A4;
  --grad-b: #4B3621;
}

/* Lead / Title polish */
.lead{ padding: clamp(16px,3vw,32px); }
.lead__inner{ max-width: 900px; margin: 0 auto; }
.lead__title{ font-size: 1.2rem; margin: 0 0 .5rem; }
.lead__desc{ font-size: 1rem; line-height: 1.6; margin: 0; }

.section-title{ padding: clamp(16px,3vw,32px) 0; text-align:center; }
.section-title h1{
  margin: 0; line-height: 1.2;
  font-size: clamp(22px,4.5vw,40px);
  color: var(--ink);
  padding:.3em .6em;
  display: inline-block;
}
body.creative-layout .section-title h1{ background: #DEA5A4; }

/* ---------------- Timeline (CodePen-style) ---------------- */
.timeline{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 20px clamp(16px,3vw,32px) clamp(32px,6vw,80px);
  overscroll-behavior: contain;   /* kill reverse “tick” on iOS */
  touch-action: pan-y;
}

.timeline-line{
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  transform: translateX(-50%);
  opacity: 0.8;
}

/* Items */
.timeline-item{
  display: flex;
  align-items: flex-start;
  margin-bottom: 60px;
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  transition: transform .6s ease-out, opacity .6s ease-out;
  will-change: transform, opacity;
  contain: layout paint;
}

.timeline-item.show{
  opacity: 1;
  transform: translateY(0);
}

/* Plain circle icon */
.timeline-icon{
  width: 50px; height: 50px;
  background: var(--icon-bg);
  border: 3px solid var(--line);
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: var(--shadow);
}
/* Inner dot for a nice minimal look */
.timeline-icon::after{
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--line);
  display: block;
}

/* Card */
.timeline-content{
  background: var(--card);
  padding: 20px 25px;
  border-radius: 15px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  width: 40%;
  position: relative;
  border: 1px solid var(--card-border);
}

.timeline-content h3{
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(18px,2.3vw,22px);
}

.timeline-content p{
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  font-size: clamp(14px,1.9vw,17px);
}

.timeline-content .date{
  font-size: .9rem;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}

/* Alternate positioning (use :nth-of-type to ignore the .timeline-line) */
.timeline > .timeline-item:nth-of-type(odd) .timeline-content{
  right: -55%;
}
.timeline > .timeline-item:nth-of-type(even) .timeline-content{
  left: 0;
}

/* Responsive */
@media (max-width: 768px){
  .timeline-line{ left: 30px; transform: none; }
  .timeline-icon{ left: 0; transform: none; }
  .timeline-content{
    width: calc(100% - 80px);
    left: 75px !important;
    right: auto !important;
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .timeline-item{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Lottie + Typewriter (unchanged minimal polish) */
.lottie-and-typewrite{
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: clamp(14px,2.6vw,28px);
  padding: clamp(16px,3vw,32px);
}
@media (max-width: 768px){ .lottie-and-typewrite{ grid-template-columns: 1fr; } }
.shopping-cart-container{ display: flex; justify-content: center; }
#shoppingCartLottie{ display: none; }
body.creative-layout #shoppingCartImage{ display: none; }
body.creative-layout #shoppingCartLottie{ display: block; filter: brightness(0) saturate(100%); }

/* Typewriter anchor */
.typewrite{
  display: block; text-align: center; text-decoration: none; color: inherit;
  line-height: 1.3; padding: 1rem; min-height: calc(1.3em * 4);
}
.typewrite > .wrap{
  border-right: .08em solid currentColor;
  animation: caret-blink .7s step-end infinite;
  white-space: pre;
}
@media (max-width: 768px){
  .typewrite > .wrap{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
}
@keyframes caret-blink{ from,to{border-color:transparent;} 50%{border-color:currentColor;} }

/* Toggle polish */
.layout-toggle{ padding: .75rem 1rem; }