/* Scene 03: film and the five destinations left after the cup scene. */
.story-scene {
  min-height: 100svh;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 26% 25%, #65442d 0%, #3b2a19 48%, #25180f 100%);
}
.story-scene-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  min-height: 100dvh;
  padding-block: clamp(30px, 5vh, 58px) 22px;
}
.story-intro { display: flex; align-items: end; gap: 32px; margin-bottom: 28px; }
.story-intro .eyebrow { align-self: start; flex: none; padding-top: 7px; }
.story-intro h2 { max-width: 670px; font-size: clamp(38px, 4.1vw, 62px); }
.story-intro h2 em { color: #e9bd82; }
.story-intro > p:last-child { max-width: 220px; margin-left: auto; color: #dcc9b5; font-size: 14px; line-height: 1.5; }
.story-scene-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 58px); align-items: center; }
.film-column { min-width: 0; }
.film-column .video-frame { aspect-ratio: 16 / 9; border: 1px solid #bc8c5b; border-radius: 20px; box-shadow: 0 20px 44px #160b0560; }
.film-column .video-frame > img { object-fit: cover; }
.film-column .video-frame:has(.video-play)::after { inset: 20% 0 0; background: linear-gradient(transparent 48%, rgba(18,10,6,.75)); }
.film-column .video-play { inset: 0; display: grid; place-items: center; font-weight: 600; }
.film-column .video-play > span:last-child { position: absolute; right: 22px; bottom: 17px; padding: 8px 10px; border-radius: 8px; background: rgba(32, 19, 11, .76); text-align: right; text-shadow: 0 2px 9px #180d09; }
.film-column .play-icon { width: 70px; height: 70px; background: #2c1a14b8; border: 1px solid #fff8; font-size: 23px; }
.film-column .image-caption { margin-top: 18px; color: #d7b48e; }
/* Five pastry links sit inside one basket. The image gives place and texture;
   links remain independent, accessible destinations. */
.bread-experience { min-width: 0; text-align: center; }
.bread-heading { margin-bottom: 4px; color: #edc593; font: 700 12px/1.3 Cuyabra, Arial, sans-serif; letter-spacing: .17em; }
.bread-heading span { font-size: 22px; vertical-align: middle; }
.bread-basket { position: relative; width: min(100%, 580px); margin-inline: auto; aspect-ratio: 3 / 2; }
.basket-image { display: block; width: 100%; height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 20px 22px #14090282); }
.bread-links { position: absolute; inset: 0; }
.bread-link { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; min-height: 44px; transform: translate(-50%, -50%); color: #fff6e8; text-decoration: none; isolation: isolate; }
.bread-link--events { --pastry-art: url('../images/croissant-photo-v1.webp'); left: 23%; top: 37%; }
.bread-link--delivery { --pastry-art: url('../images/triangular-puff-photo-v1.webp'); left: 50%; top: 32%; }
.bread-link--yelp { --pastry-art: url('../images/pan-de-queso-v1.webp'); left: 77%; top: 37%; }
.bread-link--about { --pastry-art: url('../images/red-filled-puff-photo-v1.webp'); left: 36%; top: 62%; }
.bread-link--shop { --pastry-art: url('../images/frosted-cake-photo-v1.webp'); left: 64%; top: 62%; }
.bread-visual { position: relative; display: block; width: min(100%, 110px); aspect-ratio: 1.14; filter: drop-shadow(0 6px 5px #3214058c); transition: transform .28s var(--ease), filter .28s ease; }
.bread-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; transition: opacity .25s ease, transform .34s var(--ease); }
/* Fixed offscreen scenes are still considered near the viewport by browsers.
   Attach the heavier basket art only while this scene is active. */
html:not(.js-scenes) .basket-image,
html.js-scenes #portal.is-current .basket-image,
html.js-scenes:not([data-current-scene])[data-initial-scene="portal"] .basket-image { background-image: url('../images/colombian-bread-basket-v1.webp'); }
html:not(.js-scenes) .bread-photo,
html.js-scenes #portal.is-current .bread-photo,
html.js-scenes:not([data-current-scene])[data-initial-scene="portal"] .bread-photo { background-image: var(--pastry-art); }
.bread-icon { position: absolute; inset: 9%; display: grid; place-items: center; border: 1.5px solid #ffd7a0; border-radius: 50%; background: radial-gradient(circle at 38% 28%, #b6733f, #6f391d 75%); color: #fff7e8; opacity: 0; transform: scale(.58) rotate(-16deg); box-shadow: 0 0 17px #ffca7cba, inset 0 0 15px #e8a46255; transition: opacity .25s ease, transform .34s var(--ease); }
.bread-icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bread-label { position: relative; z-index: 1; display: block; max-width: 100%; margin-top: -2px; padding: 5px 7px 4px; border: 1px solid #dca96c9e; border-radius: 100px; background: #392317ef; color: #fff6e8; box-shadow: 0 3px 10px #1c0d0870; font: 700 clamp(9px, .8vw, 12px)/1.1 Cuyabra, Arial, sans-serif; letter-spacing: .08em; white-space: nowrap; transition: background .25s ease, box-shadow .25s ease; }
.bread-link:is(:hover, :focus-visible, :active) .bread-photo { opacity: 0; transform: scale(.72) rotate(12deg); }
.bread-link:is(:hover, :focus-visible, :active) .bread-icon { opacity: 1; transform: scale(1) rotate(0); }
.bread-link:is(:hover, :focus-visible, :active) .bread-visual { transform: translateY(-5px) scale(1.08); filter: drop-shadow(0 0 13px #ffd398aa); }
.bread-link:is(:hover, :focus-visible, :active) .bread-label { background: #8d4d27; box-shadow: 0 0 14px #e8ad6d8c; }
.bread-link:focus-visible { outline: 2px solid #ffe6bc; outline-offset: 6px; border-radius: 18px; }
.story-cue { display: inline-flex; align-items: center; align-self: center; gap: 15px; min-height: 56px; margin-top: auto; padding: 12px 18px 0; font: 700 12px/1.2 Cuyabra, Arial, sans-serif; letter-spacing: .17em; }
.glow-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(250, 208, 139, .75); border-radius: 50%; color: #ffe4a7; font: 400 25px/1 Arial, sans-serif; box-shadow: 0 0 10px #e7ab5f99, 0 0 24px #e7ab5f55; animation: arrow-glow 2.6s ease-in-out infinite; }
@keyframes arrow-glow { 50% { box-shadow: 0 0 17px #ffd08fc9, 0 0 38px #e9ab64a0; transform: translateY(3px); } }

/* Scene 04: Colombian landscape and the larger social/contact destinations. */
.social-scene {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: #172016 url('../images/colombian-landscape-toucan-v1.webp') center center / cover no-repeat;
}
.social-scene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 20, 13, .77) 0%, rgba(25, 22, 15, .67) 38%, rgba(20, 20, 14, .2) 74%), linear-gradient(0deg, rgba(14, 16, 10, .78), transparent 43%); pointer-events: none; }
.social-content { position: relative; z-index: 1; padding-block: 86px 48px; }
.social-content .eyebrow { color: #efc78c; }
.social-content h2 { max-width: 630px; margin-top: 20px; font-size: clamp(58px, 7.7vw, 112px); line-height: .97; letter-spacing: -.062em; text-shadow: 0 3px 22px #0f1108aa; }
.social-content h2 em { display: block; color: #f2c991; }
.social-description { max-width: 400px; margin-top: 24px; color: #fff8ee; font-size: 17px; line-height: 1.5; text-shadow: 0 2px 12px #0f1108; }
.social-content .social-links { display: flex; gap: 16px; margin-top: 42px; }
.social-content .social-link { width: 84px; height: 84px; border: 1.5px solid #f0ca96; background: rgba(41, 28, 18, .56); backdrop-filter: blur(4px); color: #fffaf1; box-shadow: 0 8px 24px #0f100a55; }
.social-content .social-link svg { width: 36px; height: 36px; stroke-width: 1.6; }
.social-content .social-link.is-pending { color: #d9c1a5; }
.social-bottom { display: flex; align-items: center; gap: 14px; margin-top: 66px; color: #eee0ca; font: 700 12px/1.4 Cuyabra, Arial, sans-serif; letter-spacing: .16em; }
.flag-mark { display: inline-block; width: 32px; height: 22px; flex: none; border-radius: 3px; background: linear-gradient(to bottom, #f9d50b 0 50%, #1039a8 50% 75%, #cf142b 75% 100%); box-shadow: 0 1px 10px #0008; }
@media (hover:hover) and (pointer:fine) {
  .social-content .social-link:hover { background: rgba(237, 190, 127, .22); transform: translateY(-4px); }
  .story-cue:hover { color: #f2c991; }
}
@media (max-width: 900px) {
  .story-intro { display: block; margin-bottom: 22px; }
  .story-intro h2 { margin-top: 9px; }
  .story-intro > p:last-child { display: none; }
  .story-scene-grid { grid-template-columns: 1fr; gap: 20px; }
  .bread-basket { width: min(100%, 520px); }
  .bread-visual { width: min(100%, 105px); }
  .bread-label { font-size: 10px; }

}
@media (max-width: 600px) {
  .story-scene-inner { justify-content: start; padding-block: 26px 16px; }
  .story-intro { margin-bottom: 15px; }
  .story-intro h2 { font-size: clamp(31px, 8vw, 39px); }
  .story-scene-grid { gap: 14px; }
  .film-column .video-frame { border-radius: 14px; }
  .film-column .video-play { font-size: 13px; }
  .film-column .video-play > span:last-child { right: 14px; bottom: 10px; }
  .film-column .play-icon { width: 50px; height: 50px; font-size: 16px; }
  .film-column .image-caption { margin-top: 8px; font-size: 10px; }
  .bread-heading { font-size: 10px; }
  .bread-basket { width: min(100%, 420px); }
  .bread-visual { width: min(100%, 82px); }
  .bread-label { font-size: 9px; padding: 4px 5px 3px; }
  .story-cue { margin-top: 14px; padding-top: 0; }
  .social-scene { background-position: 82% center; }
  .social-scene::before { background: linear-gradient(0deg, rgba(14, 16, 10, .88) 0%, rgba(14, 16, 10, .58) 52%, rgba(14, 16, 10, .2) 100%); }
  .social-content { align-self: end; padding-block: 70px 38px; }
  .social-content h2 { font-size: clamp(54px, 15vw, 76px); }
  .social-description { font-size: 15px; }
  .social-content .social-links { gap: 9px; margin-top: 32px; }
  .social-content .social-link { width: min(16vw, 64px); height: min(16vw, 64px); }
  .social-content .social-link svg { width: 28px; height: 28px; }
  .social-bottom { margin-top: 48px; font-size: 10px; }
}
@media (max-width: 360px) {
  .story-intro h2 { font-size: 30px; }
  .story-cue { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .glow-arrow { animation: none; } }