/* Peel-to-reveal flower stickers: a real orchid cutout printed as a die-cut,
   glossy vinyl sticker. Peeling lifts it from its corner to reveal a prompt.
   The note is always in the page (and simply shown without JavaScript). */
.peel { position: relative; display: grid; width: min(100%, 300px); min-height: 210px; margin: 22px 0 0; }
.peel > * { grid-area: 1 / 1; }
.peel__note { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 12px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"), #fffdf7; box-shadow: inset 0 0 0 1px rgba(105, 42, 66, .1), 0 1px 2px rgba(60, 40, 30, .1), 0 8px 14px -8px rgba(60, 40, 30, .2); }
.peel__note:focus { outline: none; }
.peel__note p { margin: 0 0 4px; font: italic 400 1.1rem/1.4 "Bodoni Moda", Georgia, serif; color: var(--burgundy); }
.peel__link { display: inline-flex; align-items: center; min-height: 40px; font: 600 .9rem var(--font-body); color: var(--orchid); text-decoration: underline; text-underline-offset: .2em; }
.peel__reset { min-height: 40px; padding: 0; border: 0; background: none; font: 500 .82rem var(--font-body); color: var(--ink-soft); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

.peel__sticker { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; cursor: pointer; perspective: 800px; }
.peel__face { position: relative; display: block; width: 170px; transform-origin: 0 0; transform: rotate(-6deg); transition: transform .8s cubic-bezier(.4, .1, .2, 1), opacity .3s .5s; }
/* White die-cut edge + soft shadow traced around the flower's real outline. */
.peel__flower { display: block; width: 100%; height: auto; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 1px 1px rgba(60, 40, 30, .28)) drop-shadow(0 8px 10px rgba(60, 40, 30, .22)); }
/* Vinyl gloss clipped to the flower shape. */
.peel__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 32%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, .18) 70%, rgba(255, 255, 255, 0) 82%); -webkit-mask: var(--flower) center / contain no-repeat; mask: var(--flower) center / contain no-repeat; pointer-events: none; }
/* The lifted corner: a small curl of the sticker's white backing. */
.peel__corner { position: absolute; right: 14%; bottom: 10%; width: 30px; height: 30px; border-radius: 0 0 60% 0; background: linear-gradient(135deg, #f1ece6 0%, #ffffff 46%, rgba(255, 255, 255, 0) 48%); box-shadow: -1px -1px 2px rgba(60, 40, 30, .12); filter: drop-shadow(-2px -2px 3px rgba(60, 40, 30, .25)); transform: rotate(8deg); transform-origin: 100% 100%; transition: transform .35s var(--ease); }
.peel__label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(105, 42, 66, .14), 0 3px 8px rgba(60, 40, 30, .1); font: 700 .82rem/1 var(--font-body); color: var(--burgundy); }
.peel__label::before { content: "↗"; color: var(--orchid); font-weight: 400; }
.peel__sticker:hover .peel__face, .peel__sticker:focus-visible .peel__face { transform: rotate(-6deg) rotate3d(1, -1, 0, -14deg); }
.peel__sticker:hover .peel__corner, .peel__sticker:focus-visible .peel__corner { transform: rotate(8deg) scale(1.35); }
.peel__sticker:active .peel__face { transform: rotate(-6deg) scale(.97); }
.peel__sticker:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; border-radius: 16px; }
.peel.is-peeled .peel__face { transform: rotate(-6deg) translate(-8px, -14px) rotate3d(1, -1, 0, 168deg); opacity: 0; }
.peel.is-peeled .peel__label { opacity: 0; transition: opacity .25s; }
.peel.is-peeled .peel__sticker { pointer-events: none; }
.peel.is-done .peel__sticker { visibility: hidden; }
.js .peel:not(.is-peeled) .peel__note { visibility: hidden; }
html:not(.js) .peel__sticker, html:not(.js) .peel__reset { display: none; }
html:not(.js) .peel { min-height: 0; }
.scrapbook__head .peel, .hiw-policies__head .peel { margin-top: 18px; }
@media (max-width: 600px) { .peel { width: 100%; } .peel__face { width: 150px; } }
@media (prefers-reduced-motion: reduce) {
  .peel__face, .peel__corner, .peel__label { transition: opacity .2s !important; }
  .peel.is-peeled .peel__face, .peel__sticker:hover .peel__face, .peel__sticker:focus-visible .peel__face { transform: rotate(-6deg); }
}