/* styles.css */

header {
    margin-top: 2vh;
}

.logo div 
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    height: 5em;
}
.logo img {
    height: 8em;
}

.links {
    background: linear-gradient(45deg, #330201, black, #330201);
    padding: 10px 0 10px 0;
    font-size: 16px;
}


.intro-text {
    margin: 0 1em 0 1em;
    color: white;
}

body {
    background-color: #0e0e0e;
    background-image: url("../public/images/Overlook_Hotel_Carpet_Dark.jpg");
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    cursor: url('../public/images/cursor-clean.cur'), auto;
}


p {
    line-height: 2em;
}

a {
    color: #ff8b00;
    text-decoration: none;
    font-weight: bold;
    cursor: url('../public/images/cursor-blood.cur'), auto;
}

a:visited {
    color: grey;
}

a:hover {
    color: white;
    cursor: url('../public/images/cursor-blood.cur'), auto;
}

a:active {
    color: #fff8b0;
    cursor: url('../public/images/cursor-blood.cur'), auto;
}

#top-line {
    border: none;
    border-top: 6px solid #2f0001; /* Set the color for the top border of the hr element */
    margin: 20px 0; /* Add some margin to the hr element for spacing */
}

#divider {
    margin: 10px 0;
    border-top: 1px solid #414141;
}

hr {
    border: none;
    border-top: 3px solid darkred; /* Set the color for the top border of the hr element */
    margin: 20px 0; /* Add some margin to the hr element for spacing */
}


#center {
    text-align: center;
    margin: 0 auto;
    width: 70%;
    background: #131313;
    box-shadow: rgb(74 0 0 / 76%) 0 12px 40px 18px;
}

#center-button {
    text-align: center;
    margin: 0 auto;
}

#separator {
    text-align: center;
    margin: 13px auto;
}

#movies {
    width: 80%;
    margin: 0 auto;
    color: white;
    line-height: 1.2em;
    text-align: justify;
}

.movie-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.movie-item {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
}

.movie-poster {
    width: 120px;
    height: auto;
    margin-right: 1em;
    border: 2px solid transparent;
    /* Initially set a transparent border */
    transition: transform 0.3s ease, border-color 0.3s ease;
    /* Add transition for border-color change */
}

.movie-poster:hover {
    transform: scale(1.8);
    border-image: linear-gradient(330deg, darkred, black);
    /* Use a gradient for the border */
    border-image-slice: 1;
    /* Ensure the whole border is visible */
    border-width: 2px;
    /* Set the border width */
}


.about
{
    text-align: left;
    margin: auto 10%;
    line-height: 2.8em;
}

 .about p {color: white;}

.notice-me {
    color:#ff8b00;
    font-size: 14px; 
    font-weight: bold;
}

.movie-list-items
{
    color: white;
}

.movie-list-items div
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}


.movie-list-items ul,li
{
    list-style: none;
    text-align: justify;
    line-height: 2em;
}



.footer {
    margin: 1em 0px 1em 0;
    width: 100%;
    text-align: center;
}

.footer div{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 40%;
    margin: 0 auto;
}

.footer p{
    color: white;
    font-size: 14px;
    line-height: 1em;
}

.social img{
    height: 2em;
}

.credit img{
    height: 2em;
}

/* For the Top Picks page */
        .tp-movie-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            background-size: cover; /* Adjust the background image size */
            background-repeat: no-repeat; /* Prevent the background from repeating */
            background-position: center center; /* Center the background image */
            flex-direction: row;
}
        .tp-movie-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .tp-movie-poster {
            width: 185px;
            height: auto;
            margin-right: 1em;
            margin-left: 1em;
            position: relative;
            z-index: 2;
        }

        .tp-movie-details {
            position: relative;
            z-index: 3;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5); /* Dark grey semi-transparent box */
            color: #fff; /* White text color */

            
        }
        
        .tp-movie-title {
            text-decoration-line: underline;
            text-decoration-color: #414141;
            text-decoration-style: dashed;
            text-underline-offset: 0.2em;
        }

/* For the Top Picks page */



/* ============ Slash Button – Mobile-optimized Full CSS ============ */

/* Theme variables (tweak as needed) */
:root {
  --base: #FEE3D4;     /* button fill */
  --ink:  138, 3, 3;   /* deep red core (#8A0303) as R,G,B */
  --edge: 86, 5, 5;    /* darker edge (#560505) as R,G,B */
}

/* Button base (desktop defaults) */
.slash-btn {
  /* layout & sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: clamp(220px, 90vw, 450px);
  min-height: 48px;
  padding: 14px 22px;

  /* visuals */
  background: var(--base);
  color: #560505;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);

  /* behavior */
  cursor: url('../public/images/cursor-blood.cur'), auto;
  position: relative;   /* canvas & pulses anchor */
  overflow: hidden;     /* clip canvas/pulses to the button */
  -webkit-tap-highlight-color: transparent;

  /* type */
  font: 700 16px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  letter-spacing: .2px;
}

/* Focus (keyboard) */
.slash-btn:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--base), #000 25%);
  outline-offset: 2px;
}

/* Hover lift (non-touch only) */
@media (hover: hover) and (pointer: fine) {
  .slash-btn:hover { box-shadow: 0 8px 22px rgba(0,0,0,.16); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  .slash-btn { transition: none; }
}

/* ===== Canvas overlay (created by JS) ======================= */
.slash-btn canvas.slash-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  pointer-events: none !important;
}

/* ===== Visceral click burst ===== */
.slash-btn .click-pulse {
  position: absolute;
  left: var(--px);
  top:  var(--py);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) scale(0.6) rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 2;

  background: radial-gradient(35% 35% at 45% 45%, rgba(120,0,0,.95) 0%, rgba(120,0,0,.7) 60%, rgba(120,0,0,0) 100%);
  border-radius: 50%;
  filter: drop-shadow(0 0 3px rgba(120,0,0,.35));
  animation: pulse-burst 420ms ease-out forwards;
}

.slash-btn .click-pulse::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(138,3,3,.55) 65%, rgba(138,3,3,0) 66%) center/100% 100% no-repeat,
    conic-gradient(from 0deg, rgba(138,3,3,.25) 0 10deg, transparent 10deg 18deg, rgba(138,3,3,.2) 18deg 28deg, transparent 28deg 40deg,
                   rgba(138,3,3,.25) 40deg 55deg, transparent 55deg 72deg, rgba(138,3,3,.2) 72deg 90deg, transparent 90deg 110deg,
                   rgba(138,3,3,.25) 110deg 130deg, transparent 130deg 160deg, rgba(138,3,3,.2) 160deg 190deg, transparent 190deg 230deg,
                   rgba(138,3,3,.25) 230deg 260deg, transparent 260deg 300deg, rgba(138,3,3,.2) 300deg 330deg, transparent 330deg 360deg);
  mix-blend-mode: multiply;
  filter: blur(0.5px);
  animation: pulse-ring 420ms ease-out forwards;
}

/* Droplets created by JS */
.slash-btn .click-drop {
  position: absolute;
  left: var(--px);
  top:  var(--py);
  width: var(--r, 4px);
  height: var(--r, 4px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(120,0,0,.9);
  filter: drop-shadow(0 0 1px rgba(120,0,0,.4));
  pointer-events: none;
  z-index: 2;
  animation: drop-fly var(--dur, 380ms) cubic-bezier(.2,.6,.2,1) forwards;
}

/* Animations */
@keyframes pulse-burst {
  0%   { opacity: .98; transform: translate(-50%,-50%) scale(0.6) rotate(var(--rot, 0deg)); }
  45%  { opacity: .75; transform: translate(-50%,-50%) scale(1.35) rotate(calc(var(--rot, 0deg) + 6deg)); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.8)  rotate(calc(var(--rot, 0deg) + 10deg)); }
}
@keyframes pulse-ring {
  0%   { opacity: .85; transform: scale(0.7); }
  55%  { opacity: .45; transform: scale(1.25); }
  100% { opacity: 0;   transform: scale(1.6); }
}
@keyframes drop-fly {
  0%   { opacity: .95; transform: translate(-50%, -50%) translate(0px, 0px) scale(1); }
  80%  { opacity: .6;  transform: translate(-50%, -50%) translate(var(--dx, 0px), calc(var(--dy, 0px))) scale(.98); }
  100% { opacity: 0;   transform: translate(-50%, -50%) translate(calc(var(--dx, 0px) * 1.08), calc(var(--dy, 0px) + 6px)) scale(.92); }
}

/* ===== Mobile / coarse-pointer style override ===== */
@media (pointer: coarse) {
  .slash-btn {
    /* Bigger, fuller, higher-contrast for small screens */
    width: clamp(260px, 94vw, 520px);
    min-height: 56px;
    padding: 18px 24px;
    border-radius: 18px;

    /* Slight gradient + stronger shadow for legibility outdoors */
    background:
      linear-gradient(180deg, #ffe9de, #FEE3D4 18%, #fbd6c0 100%);
    box-shadow:
      0 10px 24px rgba(0,0,0,.18),
      0 1px 0 rgba(255,255,255,.35) inset;

    /* Larger, heavier type */
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .3px;
  }
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  .slash-btn .click-pulse,
  .slash-btn .click-pulse::after,
  .slash-btn .click-drop { animation-duration: 240ms !important; }
}

/* Balloon ======================================================= */

/* Container for the balloon */
#first-visit-balloon {
  position: fixed;
  bottom: 0;
  left: 50%;                          /* horizontally centered */
  transform: translate(-50%, 100vh);  /* start off-screen below */
  z-index: 9999;
  pointer-events: none;               /* do not block clicks */
  opacity: 0;
}

/* When the JS decides to show it */
#first-visit-balloon.balloon-visible {
  opacity: 1;
  animation: first-visit-balloon-float 6s ease-in-out forwards;
}

/* The red balloon circle/oval, slightly transparent */
#first-visit-balloon .balloon-shape {
  width: 80px;
  height: 100px;
  /* last value (0.8) = transparency: lower = more see-through */
  background: rgba(229, 57, 53, 0.9);  /* was #e53935 */
  border-radius: 45% 45% 50% 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* Highlight "light dot" on the balloon */


#first-visit-balloon .balloon-shape::before {
  content: "";
  position: absolute;
  top: 10px;                       /* distance from top edge of balloon */
  left: 15px;                      /* distance from left edge of balloon */
  width: 12px;                    /* horizontal size of the highlight */
  height: 16px;                   /* vertical size of the highlight */
  border-radius: 50%;             /* shape: 50% = perfect circle */
  background: rgba(255, 255, 255, 0.75); /* color & brightness of highlight */
  filter: blur(1px);              /* softness of highlight edge */
  opacity: 0.95;                  /* overall visibility of the highlight */
  transform: rotate(25deg);      /* rotation angle, tweak this value */
  transform-origin: center;       /* pivot point of rotation */
}

/* Little balloon knot (tip pointing down toward the string) */
#first-visit-balloon .balloon-shape::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 7px 10px 7px;
  border-color: transparent transparent #c62828 transparent;
}

/* String */
#first-visit-balloon .balloon-string {
  width: 2px;
  height: 120px;
  margin: 0 auto;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.05)
  );
}

/* Keyframes: float from below the screen to above the top */
@keyframes first-visit-balloon-float {
  0% {
    transform: translate(-50%, 100vh);   /* way below */
  }
  10% {
    transform: translate(-50%, 0);       /* bottom edge */
  }
  60% {
    transform: translate(-50%, -60vh);   /* middle float */
  }
  100% {
    transform: translate(-50%, -120vh);  /* well above top, fully gone */
  }
}

/* ============================================================= */


/* Media queries for responsiveness */
@media screen and (max-width: 1000px) {
    header {
        flex-direction: column;
        align-items: center;
    }

    .logo img {
        height: 8em;
    }

    .links {
        font-size: 24px !important;
    }
    .intro-text {
        text-align: center;
    }
    
    summary {
        font-size: 16px !important;
        padding: 5px 0 5px 0;
    }
    

    #center {
        width: 95%;
    }
    
    .movie-item {
        width: 100%;
        margin: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
    .quick-links {
        font-size: 16px !important;
        line-height: 1em;
    }
    
    #movies {
    width: 90%;
    }

    .movie-list-items li {
        font-size: 16px !important;
    }

    .movie-details {
    line-height: 2em;
    
    }
    .movie-poster {
        width: 280px;
        height: auto;
        margin: 0 0 1em 0;
    }


    .button-64 {
       
        width: 15em;
        line-height: 2em;
        font-size: 2.5em;
    }
    
    .footer div{
        font-size: 14px;
    }
    
    .footer-social {
        width: 90% !important;
        font-size: 14px;
    }
    
    .social img{
        height: 4em !important;
    }
    
    
    .credit img{
        height: 2em !important;        
    }
    
        /* New media query styles for mobile */
        .tp-movie-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        flex-direction: column;
    }

    .tp-movie-poster {
        margin: 1em auto 1em auto;
    }

    .tp-movie-details {
        width: 96%;

    }
    
}

/*----------------------

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(3) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(4) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(5) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(6) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}