/* Paris Pâtisserie: twinkling string lights, drifting rose petals, steam curling from the coffee.
   The opening ("cafe"): the awning unrolls, the lights come on bulb by bulb and the macaron towers
   stack themselves in the window. Only transform and opacity animate; reduced motion shows the
   open café, still. A light theme: the opening's title card is light too. */
[data-theme="patisserie"] .pt-bulb { animation: pt-twinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
[data-theme="patisserie"] .hero-art .pt-petal { animation: pt-fall 9s linear infinite; animation-delay: calc(var(--i) * -.8s); }
[data-theme="patisserie"] .pt-steam { animation: pt-steam 2.6s ease-in-out infinite; }
[data-theme="patisserie"] .hero-art .pt-awning { transform-box: fill-box; transform-origin: center top; }
[data-theme="patisserie"] .hero-art .pt-under { display: none; }
[data-theme="patisserie"] .title { font-weight: 400; letter-spacing: -.01em; }
[data-theme="patisserie"] .eyebrow { color: var(--ink); letter-spacing: .02em; }
[data-theme="patisserie"] .card { border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 18px 40px rgba(45, 33, 64, .08); }
[data-theme="patisserie"] .btn { border-radius: 4px; letter-spacing: .02em; }

/* the opening */
[data-theme="patisserie"] .op-art svg { overflow: visible; }
[data-theme="patisserie"] .op-art .pt-under { display: inline; }
[data-theme="patisserie"] .op-card { background: rgba(255, 255, 255, .9); color: var(--cardInk); box-shadow: 0 18px 50px rgba(45, 33, 64, .16); border-radius: 8px; }
[data-theme="patisserie"] .op-eyebrow { color: #a32c50; }
[data-theme="patisserie"] .op-line { font-style: italic; }
[data-theme="patisserie"] .op-cafe.op-run .pt-awning { animation: pt-unroll .9s .7s cubic-bezier(.3, 1.3, .5, 1) both; }
[data-theme="patisserie"] .op-cafe.op-run .pt-bulb { animation: pt-on .3s calc(1.5s + var(--i) * .07s) ease-out both, pt-twinkle 2.8s 3s ease-in-out infinite; }
[data-theme="patisserie"] .op-cafe.op-run .pt-mac { animation: pt-drop .5s calc(2.3s + var(--i) * .07s) cubic-bezier(.4, 0, .4, 1.5) both; }
[data-theme="patisserie"] .op-cafe.op-run .pt-cup { animation: pt-on .6s 3.4s ease-out both; }

@keyframes pt-twinkle { 50% { opacity: .45; } }
@keyframes pt-fall { 0% { opacity: 0; transform: translate(0, -20px) rotate(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(-40px, 90px) rotate(240deg); } }
@keyframes pt-steam { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pt-unroll { from { transform: scaleY(0); } }
@keyframes pt-on { from { opacity: 0; } }
@keyframes pt-drop { from { opacity: 0; transform: translateY(-40px); } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="patisserie"] .btn, [data-theme="patisserie"] .card h2, [data-theme="patisserie"] .title, [data-theme="patisserie"] .eyebrow { overflow-wrap: anywhere; }
/* film: the camera opens close on the hero beat and pulls back as the story plays; the squad
   makes its own entrance, then lands its settle; the squad blinks now and then. */
[data-theme="patisserie"] .op-art { transform: scale(1.35); transform-origin: 40% 72%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="patisserie"] .op-pal { transform: translateY(-36vh); opacity: 0; transition-property: transform, opacity; transition-duration: 1s; transition-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
[data-theme="patisserie"] .op-run .op-art, [data-theme="patisserie"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="patisserie"] .op-final .op-art, [data-theme="patisserie"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="patisserie"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: pt-settle .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes pt-settle { 0% { transform: scale(1.08, .92); } 60% { transform: scale(.98, 1.03); } 100% { transform: none; } }
/* phones in portrait: the scene steps forward so it fills the screen */
@media (max-aspect-ratio: 4/5) { [data-theme="patisserie"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="patisserie"] .critter .cr-eye, [data-theme="patisserie"] .op-pal svg, [data-theme="patisserie"] .hero-art *, [data-theme="patisserie"] .pt-bulb, [data-theme="patisserie"] .pt-steam { animation: none !important; }
}