/* A quiet, product-first presentation, scoped to the interactive homepage. */
.home-frame:has(.samosa-diagram:not([hidden])) { grid-template-rows: auto; }
.home-frame:has(.samosa-diagram:not([hidden])) > .home-fresh {
    min-height: clamp(460px, calc(100svh - 154px), 680px);
}
.home-hero:has(.samosa-diagram:not([hidden])) {
    padding: 60px 24px 64px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
#samosas-and-salsa { scroll-margin-top: 80px; }
#samosas-and-salsa .home-hero-copy { color: var(--home-muted); font-size: clamp(18px, 2vw, 24px); }
#samosas-and-salsa .home-actions { gap: 28px; margin-top: 12px; }
#samosas-and-salsa .home-button {
    min-height: 44px;
    padding: 8px 0;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--home-orange);
    font-size: 16px;
    font-weight: 400;
}
#samosas-and-salsa .home-button::after { content: '\203A'; font-size: 23px; line-height: 1; }
#samosas-and-salsa .home-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.samosa-diagram {
    --spread: 0;
    width: 100%;
    margin: 12px auto 0;
    text-align: center;
}
.samosa-diagram[hidden], [data-diagram-fallback][hidden] { display: none !important; }
.samosa-diagram button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.samosa-diagram__stage {
    position: relative;
    width: min(100%, 640px);
    aspect-ratio: 800 / 650;
    margin: 0 auto;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
}
.samosa-diagram__art { display: block; width: 100%; height: 100%; overflow: visible; }
.samosa-diagram__camera {
    /* A fixed origin keeps both close-ups smooth when returning to the full view. */
    transform-origin: 340px 435px;
    transform: translate(0, 0) scale(1);
    transition: transform 1000ms cubic-bezier(.22,.75,.18,1);
}
.samosa-diagram[data-closeup="fold"] .samosa-diagram__camera { transform: translate(160px, -110px) scale(2.8); }
.samosa-diagram[data-closeup="salsa"] .samosa-diagram__camera { transform: translate(-834px, -194px) scale(2.8); }
.samosa-diagram__shadow { transition: opacity 400ms; }
.samosa-diagram[data-closeup="fold"] .samosa-diagram__shadow,
.samosa-diagram[data-closeup="fold"] .samosa-diagram__salsa,
.samosa-diagram[data-closeup="salsa"] .samosa-diagram__shadow,
.samosa-diagram[data-closeup="salsa"] .samosa-diagram__shell,
.samosa-diagram[data-closeup="salsa"] .samosa-diagram__fold { opacity: 0; }
.samosa-diagram__piece {
    transform-origin: 435px 310px;
    transition: transform 850ms cubic-bezier(.22,.75,.18,1), opacity 600ms;
}
.samosa-diagram__shell { transform: translate(calc(var(--spread) * -140px), calc(var(--spread) * -45px)) scale(calc(1 - var(--spread) * .16)); }
.samosa-diagram__fold { transform: translate(calc(var(--spread) * 10px), calc(var(--spread) * 65px)); }
.samosa-diagram__filling { opacity: var(--spread); transform: translate(calc(var(--spread) * 170px), calc(var(--spread) * 35px)); }
.samosa-diagram__salsa { transform: translate(calc(var(--spread) * 80px), calc(var(--spread) * 45px)); }
.samosa-diagram__hotspots { position: absolute; inset: 0; transition: opacity 250ms; }
.samosa-diagram[data-detail-open="true"] .samosa-diagram__hotspots { opacity: 0; pointer-events: none; }
.samosa-diagram__point {
    position: absolute;
    left: calc(var(--point-x) + var(--spread) * var(--point-dx));
    top: calc(var(--point-y) + var(--spread) * var(--point-dy));
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: left 850ms cubic-bezier(.22,.75,.18,1), top 850ms cubic-bezier(.22,.75,.18,1);
}
.samosa-diagram__point span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #ffffffb3;
    border-radius: 50%;
    background: rgb(255 255 255 / .92);
    color: #34332e;
    box-shadow: 0 2px 12px #32210e1a;
    backdrop-filter: blur(8px);
    transition: color 200ms, background 200ms, transform 300ms;
}
.samosa-diagram__point svg { width: 12px; height: 12px; transition: transform 300ms; }
.samosa-diagram__point:hover span { transform: scale(1.12); background: #fff; }
.samosa-diagram__point[aria-pressed="true"] span { background: #27261f; color: #fff; border-color: #27261f; }
.samosa-diagram__point[aria-pressed="true"] svg { transform: rotate(45deg); }
.samosa-diagram__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 76px;
    max-width: 430px;
    margin: 4px auto 14px;
}
.samosa-diagram__caption h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.samosa-diagram__caption h3[hidden] { display: none; }
.samosa-diagram__caption p { margin: 0; color: var(--home-muted); font-size: 14px; line-height: 1.5; text-wrap: balance; }
.samosa-diagram__caption.is-idle p { color: #77736b; font-size: 13px; }
.samosa-diagram__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 160px;
    min-height: 46px;
    padding: 12px 21px;
    border: 0;
    border-radius: 999px;
    background: #27261f;
    color: #fff;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 200ms, transform 200ms;
}
.samosa-diagram__toggle:hover { background: #46453f; }
.samosa-diagram__toggle:active { transform: scale(.97); }
.samosa-diagram__toggle svg { width: 17px; height: 17px; opacity: .85; }
.samosa-diagram__toggle .samosa-diagram__back-icon { display: none; order: -1; }
.samosa-diagram[data-detail-open="true"] .samosa-diagram__toggle-icon { display: none; }
.samosa-diagram[data-detail-open="true"] .samosa-diagram__back-icon { display: block; }
.samosa-diagram button:focus-visible { outline: 2px solid var(--home-orange); outline-offset: 4px; }
@media (min-width: 768px) and (max-height: 850px) {
    .home-hero:has(.samosa-diagram:not([hidden])) { padding-top: 40px; padding-bottom: 44px; }
    .samosa-diagram__stage { width: min(100%, 520px); }
}
@media (max-width: 767px) {
    .home-frame:has(.samosa-diagram:not([hidden])) > .home-fresh { min-height: clamp(420px, calc(100svh - 200px), 620px); }
    .home-hero:has(.samosa-diagram:not([hidden])) { padding: 44px 0 48px; }
    #samosas-and-salsa .home-actions { gap: 24px; margin-top: 8px; }
    #samosas-and-salsa .home-button { font-size: 15px; }
    .samosa-diagram { margin-top: 22px; }
    .samosa-diagram__stage { width: min(100%, 480px); }
    .samosa-diagram__point span { width: 26px; height: 26px; }
    .samosa-diagram__caption { min-height: 88px; max-width: 340px; padding-inline: 10px; margin-top: 12px; margin-bottom: 12px; }
    .samosa-diagram__caption h3 { font-size: 18px; }
    .samosa-diagram__caption p { font-size: 13px; }
    .samosa-diagram__toggle { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .samosa-diagram *, .samosa-diagram *::before, .samosa-diagram *::after { transition: none !important; animation: none !important; }
}