/* Required effects 05, 07, 11, 14. Reveal, tilt and flip use separate layers. */
.directions-section{position:relative;background:linear-gradient(145deg,var(--surface-lilac),var(--color-canvas) 48%,var(--surface-pink));padding:0;color:var(--color-ink)}
.directions-stage{padding:70px 0 52px}
.directions-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:32px}
.directions-heading h2{font-size:clamp(32px,3.3vw,48px);line-height:1.15;letter-spacing:-.045em;max-width:700px;margin:0}
.directions-heading p{max-width:275px;font-size:15px;line-height:1.65;margin:0;color:var(--color-muted)}
.directions-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent;padding:20px 0 38px;outline-offset:4px}
.directions-track{display:flex;gap:24px;list-style:none;margin:0;padding:0;width:max-content;transform:translate3d(0,0,0)}
.direction-card{flex:0 0 clamp(300px,28vw,356px);width:clamp(300px,28vw,356px);scroll-snap-align:start;perspective:1000px;--direction-tint:var(--surface-lilac)}
.direction-card:nth-child(2),.direction-card:nth-child(5){--direction-tint:var(--surface-pink)}
.direction-card:nth-child(3){--direction-tint:var(--surface-purple)}
.direction-reveal{height:100%;opacity:1;transform:none}
.direction-tilt{height:100%;transform:rotateX(var(--direction-tilt-x,0deg)) rotateY(var(--direction-tilt-y,0deg));transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.75,.25,1)}
.direction-card.is-direction-tilting .direction-tilt{transition:transform .12s linear}
.direction-flip{height:100%;position:relative;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .72s cubic-bezier(.2,.7,.2,1)}
.direction-card.is-flipped .direction-flip{transform:rotateY(180deg)}
.direction-front{min-height:435px;display:flex;flex-direction:column;align-items:flex-start;padding:28px;border-radius:var(--radius-card);border:1px solid var(--surface-glass-strong);background:linear-gradient(145deg,var(--color-white),var(--direction-tint));box-shadow:var(--shadow-card);position:relative;isolation:isolate}
.direction-front,.direction-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.direction-front{height:100%;transform:rotateY(0deg);cursor:pointer}
.direction-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;transform:rotateY(180deg);padding:26px;border-radius:var(--radius-card);border:1px solid var(--surface-glass-strong);background:linear-gradient(140deg,var(--direction-tint),var(--color-white));box-shadow:var(--shadow-card);pointer-events:none}
.direction-card.is-flipped .direction-front{pointer-events:none}
.direction-card.is-flipped .direction-back{pointer-events:auto}
.direction-back h3{font-size:23px;line-height:1.2;letter-spacing:-.035em;margin:13px 0 15px}
.direction-back p{font-size:14px;line-height:1.65;color:var(--color-muted);margin:0 0 16px;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent}
.direction-return{font-size:12px;line-height:1.5;min-height:32px;display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:var(--color-purple);cursor:pointer;flex-shrink:0}
.direction-return span{font-size:20px}
.direction-back .direction-book{flex-shrink:0}
.direction-art{width:100%;height:110px;margin:0 0 22px;display:flex;align-items:center;justify-content:center;color:var(--color-purple);position:relative}
.direction-art svg{width:154px;height:110px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 9px 9px color-mix(in srgb,var(--color-purple) 15%,transparent))}
.direction-art .art-soft{fill:var(--color-lilac);stroke:none}
.direction-art .art-pink{fill:var(--color-pink);stroke:none}
.direction-art .art-solid{fill:var(--color-primary);stroke:var(--color-primary)}
.direction-front h3{font-size:24px;line-height:1.2;letter-spacing:-.035em;margin:0 0 14px;max-width:260px}
.direction-front p{font-size:15px;line-height:1.7;color:var(--color-muted);margin:0 0 22px;max-width:285px}
.direction-book{margin-top:auto;font-size:14px;line-height:1.5;min-height:44px;display:inline-flex;align-items:center;gap:16px;padding:0;border:0;background:transparent;color:var(--color-purple);font-weight:600;text-align:left;cursor:pointer}
.direction-book span{font-size:24px;line-height:1}
.direction-book:focus-visible,.direction-return:focus-visible,.directions-control:focus-visible{outline:2px solid var(--color-purple);outline-offset:6px;border-radius:5px}
.directions-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px}
.directions-bottom p{font-size:13px;line-height:1.6;margin:0;color:var(--color-muted)}
.directions-controls{display:none;align-items:center;gap:12px;flex-shrink:0}
.directions-ready .directions-controls{display:flex}
.direction-position{font-size:13px;font-variant-numeric:tabular-nums;min-width:43px;text-align:center;color:var(--color-purple)}
.directions-control{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--color-line);border-radius:50%;color:var(--color-purple);background:var(--surface-glass-strong);font:inherit;font-size:22px;cursor:pointer;transition:background .2s,box-shadow .2s}
.directions-control:hover{background:var(--color-lilac);box-shadow:var(--shadow-card)}
.directions-control:disabled{opacity:.4;cursor:default;box-shadow:none}
.directions-pinned .directions-stage{position:sticky;top:84px;padding-top:16px;padding-bottom:16px}
.directions-pinned .directions-heading{margin-bottom:16px;gap:24px;align-items:center}
.directions-pinned .directions-heading h2{font-size:clamp(32px,2.7vw,40px);max-width:850px}
.directions-pinned .directions-heading h2 br{display:none}
.directions-pinned .directions-heading p{font-size:13px;line-height:1.55;max-width:245px}
.directions-pinned .directions-viewport{padding-top:14px;padding-bottom:20px}
.directions-pinned .direction-front{min-height:415px;padding:22px}
.directions-pinned .direction-back{padding:22px}
.directions-pinned .direction-back h3{font-size:23px;margin-top:8px;margin-bottom:12px}
.directions-pinned .direction-back p{font-size:14px;line-height:1.55;margin-bottom:12px}
.directions-pinned .direction-art{height:72px;margin-bottom:10px}
.directions-pinned .direction-art svg{height:72px;width:118px}
.directions-pinned .direction-front h3{font-size:23px;margin-bottom:10px}
.directions-pinned .direction-front p{font-size:14px;line-height:1.55;margin-bottom:12px}
.directions-pinned .directions-control{width:36px;height:36px}
.directions-pinned .directions-viewport{overflow:hidden;scroll-snap-type:none}
.directions-pinned .directions-track{will-change:transform}
@media(max-width:980px){
  .directions-stage{padding:56px 0 38px}
  .directions-heading{display:block;margin-bottom:20px}
  .directions-heading p{margin-top:18px;max-width:460px}
  .direction-card{flex-basis:310px;width:310px}
  .directions-viewport{margin-right:-18px;padding-right:18px}
  .directions-track{gap:18px}
}
@media(max-width:640px){
  .directions-stage{padding:44px 0 30px}
  .directions-heading h2{font-size:32px}
  .directions-heading p{font-size:14px;margin-top:14px}
  .directions-viewport{margin-right:0;padding-top:16px;padding-bottom:26px}
  .direction-card{flex-basis:min(300px,calc(100vw - 64px));width:min(300px,calc(100vw - 64px))}
  .direction-front{padding:24px;min-height:437px}
  .direction-back{padding:24px}
  .direction-back h3{font-size:23px}
  .direction-back p{font-size:14px;line-height:1.55}
  .direction-front h3{font-size:23px}
  .direction-front p{font-size:14px}
  .direction-art{height:98px;margin-bottom:18px}
  .directions-bottom{align-items:flex-start;gap:12px}
  .directions-bottom p{max-width:160px;font-size:12px}
  .directions-controls{gap:6px}
  .directions-control{width:36px;height:36px}
  .direction-position{min-width:32px;font-size:12px}
}
.reduce-motion .direction-tilt{transform:none!important;transition:none}
.reduce-motion .direction-flip{transition:none}
@media(prefers-reduced-motion:reduce){.direction-tilt{transform:none!important;transition:none}.direction-flip{transition:none}.directions-viewport{scroll-behavior:auto}}