/* ==========================================================================
   The angel intro screen (platformfolder.html) -- the first thing the center
   box shows, before the NEXT arrow opens the desktop.

   Loaded after Styles7.css so it overrides the few rules it needs to. Every
   decoration is positioned in percentages inside the screen, so it scales with
   the box and none of it is baked into the wallpaper. Remove the one <link>
   in platformfolder.html to put everything back exactly as it was.
   ========================================================================== */

td.windowbody#platformFolder {
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* ---- the stage ---------------------------------------------------------- */

#introStage {
    position: relative;
    width: 100%;
    height: 420px;
    box-sizing: border-box;
    padding-top: 4px;
    text-align: center;
}

/* a little welcome sign above the picture */

.introTitle {
    position: relative;
    z-index: 3;
    font-family: '2Credits';
    font-size: 19px;
    color: #ff7ec8;
    text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(120, 90, 180, .35);
    letter-spacing: 1px;
    margin: 0 0 2px;
}

.introTitle img {
    width: 22px;
    vertical-align: -5px;
}

/* ---- the angel picture, now in a frame ---------------------------------- */

.angelIcon {
    position: relative;
    z-index: 2;
    width: 296px !important;
    height: 228px !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 auto 4px !important;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #b98fd6, 3px 3px 0 rgba(90, 40, 120, .35);
}

/* pinned to the frame's corners */
.angelPin {
    position: absolute;
    z-index: 3;
    width: 26px;
    image-rendering: auto;
}

.angelPin.tl { left: 20%;  top: 12%; }
.angelPin.tr { right: 20%; top: 12%; }

/* ---- speech box + arrow, which used to fall out of each other ----------- */

.nextButton {
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 380px !important;
    height: auto !important;
    min-height: 46px;
    padding: 6px 8px;
    box-sizing: border-box;
    border: 1px dotted #57caff;
    background-color: #faffb3;
    background-image: linear-gradient(#ffffe8, #faffb3);
    box-shadow: 2px 2px 0 rgba(90, 40, 120, .25);
    margin: 0 auto !important;
}

p#angelSpeak {
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
}

.nextButton a { flex: none; line-height: 0; }

#nextArrow {
    float: none !important;
    margin: 0 !important;
    padding: 4px 6px;
    background: linear-gradient(#fff, #ffd6f2);
    border: none;
    box-shadow: inset -2px -2px #c0338d, inset 2px 2px #fff, 1px 1px 0 rgba(90, 40, 120, .35);
    cursor: pointer;
    animation: introNudge 1.6s ease-in-out infinite;
}

#nextArrow:active {
    box-shadow: inset 2px 2px #c0338d, inset -2px -2px #fff;
}

#nextArrow img { width: 20px; display: block; }

@keyframes introNudge { 50% { transform: translateX(3px); } }

/* divider under the speech box */
.introDivider {
    position: relative;
    z-index: 2;
    display: block;
    margin: 2px auto 0;
    width: 300px;
}

/* ---- stickers floating in the margins ----------------------------------- */

.introSticker {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.introSticker.float  { animation: introFloat 4.5s ease-in-out infinite; }
.introSticker.float2 { animation: introFloat 6s   ease-in-out infinite reverse; }
.introSticker.drift  { animation: introDrift 9s   linear      infinite; }

@keyframes introFloat { 50% { transform: translateY(-8px); } }
@keyframes introDrift {
    0%   { transform: translateX(0);     opacity: .85; }
    50%  { transform: translateX(14px);  opacity: 1; }
    100% { transform: translateX(0);     opacity: .85; }
}

/* left margin */
.introSticker.s-fairy1 { left: 3%;  top: 12%; width: 38px; }
.introSticker.s-cloud1 { left: 1%;  top: 42%; width: 58px; }
.introSticker.s-angel1 { left: 4%;  top: 66%; width: 44px; }
/* right margin */
.introSticker.s-fairy2 { right: 3%; top: 16%; width: 38px; }
.introSticker.s-cloud2 { right: 1%; top: 46%; width: 60px; }
.introSticker.s-wings  { right: 4%; top: 70%; width: 56px; }
/* little sparkles over the wallpaper -- kept clear of the title, the frame
   and the photo strip so nothing lands on top of anything readable */
.introSticker.s-star1  { left: 12%; top: 32%; width: 16px; }
.introSticker.s-star2  { right: 12%; top: 36%; width: 14px; }
.introSticker.s-star3  { left: 8%;  top: 4%;  width: 26px; }
.introSticker.s-orb    { right: 8%;  top: 6%;  width: 30px; }

/* ---- photo strip along the bottom --------------------------------------- */

.introPhotos {
    position: relative;
    z-index: 2;
    margin-top: 3px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}

.introPhotos a {
    display: block;
    line-height: 0;
    background: #fff;
    padding: 3px 3px 4px;
    box-shadow: 2px 2px 0 rgba(90, 40, 120, .3);
    border: 1px solid #ffd6f2;
    transition: transform .15s;
}

.introPhotos a:nth-child(1) { transform: rotate(-3deg); }
.introPhotos a:nth-child(3) { transform: rotate(3deg); }
.introPhotos a:hover        { transform: rotate(0) scale(1.12); z-index: 4; position: relative; }

.introPhotos img {
    width: 84px;
    height: 52px;
    object-fit: cover;
    display: block;
}