/* YALI CAKES: quiet motion layer.
   Soft fade-ups, gentle hover states and smooth scrolling. Nothing else. */

:root{--ease-out:cubic-bezier(.2,.7,.2,1)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Hand the original design's scroll animations over to this layer. */
html.fx h1,html.fx h2,
html.fx .typecard,html.fx #order-panel,html.fx #quote,html.fx #dessert-quote,
html.fx #workshops ul,html.fx #workshops [style*="grid-template-columns"]>div,
html.fx .ph,html.fx #desserts svg[role="img"],
html.fx .hero-full .banner-video,html.fx .hero-full>div,
html.fx #cakes>div,html.fx #workshops>div,html.fx #desserts>div,html.fx #about>div,html.fx #faq>div,
html.fx .marq-track{animation:none!important}
html.fx{scroll-behavior:auto}

/* Fade-up on first view */
html.fx .rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s var(--ease-out)}
html.fx .rv.in{opacity:1;transform:none}

/* Buttons: a calm colour shift */
html.fx .btn-primary,html.fx .btn-soft,html.fx .typecard{transition:background-color .25s ease,border-color .25s ease,box-shadow .35s ease}
html.fx .btn-primary:hover,html.fx .btn-soft:hover,html.fx .btn-white:hover{transform:none}

/* Nav underline */
html.fx .nav-link{position:relative}
html.fx .nav-link::after{content:"";position:absolute;right:0;left:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease-out)}
@media (hover:hover){html.fx .nav-link:hover::after{transform:scaleX(1)}}

/* Gallery photos */
html.fx .gal-slide img{transition:transform 1.2s var(--ease-out)}
@media (hover:hover){html.fx .gal-slide:hover img{transform:scale(1.04)}}

/* FAQ chevron */
html.fx .faq summary::after{transition:transform .35s var(--ease-out)}
html.fx .faq details[open] summary::after{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){html.fx .rv{opacity:1;transform:none;transition:none}}

/* Opening screen */
.yl-pre{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none;place-items:center}
html.pre .yl-pre{display:grid}
html.pre:not(.fx-ready) body{overflow:hidden}
.yl-pre__layer{position:absolute;inset:0;background:#FAE4EA;clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.76,0,.24,1) .12s}
.yl-pre__layer--b{background:#694B3A;transition-delay:0s}
.yl-pre__logo{position:relative;width:min(300px,62vw);height:auto;overflow:visible;transition:opacity .5s ease,transform .5s var(--ease-out)}
.yl-pre__logo .yl-fill{opacity:0;transition:opacity .9s ease 1.7s}
.yl-pre__logo .yl-draw path{stroke-dasharray:1 1;stroke-dashoffset:1}
.yl-pre.in .yl-fill{opacity:1}
.yl-pre.in .yl-draw path{animation:yl-draw .95s cubic-bezier(.55,.1,.25,1) forwards;animation-delay:calc(.25s + var(--i)*85ms)}
.yl-pre.in .yl-draw{transition:opacity .8s ease 2s;opacity:0}
@keyframes yl-draw{to{stroke-dashoffset:0}}
.yl-pre.out .yl-pre__logo{opacity:0;transform:translateY(-14px)}
.yl-pre.out .yl-pre__layer{clip-path:inset(0 0 100% 0)}
@media (prefers-reduced-motion:reduce){.yl-pre{display:none}}

/* Forms: one column, every field the same width and height */
#order-panel .row2,#quote .row2,#dessert-quote .row2{display:contents}
#order-panel .grp,#quote .grp,#dessert-quote .grp{max-width:none!important;flex:none!important;width:100%}
#order-panel .grp:empty,#quote .grp:empty,#dessert-quote .grp:empty{display:none}
#order-panel .field,#quote .field,#dessert-quote .field{max-width:520px}
input.field{height:48px}
input.field[type="date"],input.field[type="time"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;line-height:1.4;text-align:start}
input.field[type="date"]::-webkit-date-and-time-value,input.field[type="time"]::-webkit-date-and-time-value{text-align:start;min-height:1.4em}